SilverStripe:将组件添加到 GridField，将它们分组到一个 div(工具栏)中

Question

我正在从事 SilverStripe 项目。在我的项目中，我正在向 GridField 动态添加组件。实际上，我正在尝试替换现有组件。由于没有替换方法，我必须删除现有组件并添加新组件。

以下是我的代码

 $grid = new GridField('ContentBlocks', 'Content Blocks', $this->owner->ContentBlocks(), $editor);
 $grid->getConfig()
      ->removeComponentsByType(GridFieldAddExistingAutocompleter::class)
      ->addComponent(new CustomGridFieldAddExistingAutocompleter())
      //configuring other components continue here

正如您在我的代码中看到的那样，我正在删除一个现有组件并添加一个新的自定义组件来替换已删除的组件。

它添加了自定义组件。但这有一个问题。问题是在前端，新组件没有添加到与删除组件相同的位置。

看这个截图:

正如您在屏幕截图中看到的那样，搜索框(添加的自定义组件)超出了添加内容 block 按钮所在的容器或 div。如果我没有进行替换，它们将留在同一行如下面的屏幕截图所示。

我在想的是，我正在寻找一种方法将它们重新组合成一行。我怎样才能做到这一点？可能吗？

Answer 1

我们可以创建自己的 GridFieldConfig 并添加我们想要的组件，而不是删除和添加现有 GridFieldConfig 的组件。

$contentBlocksFieldConfig = GridFieldConfig::create();
$contentBlocksFieldConfig->addComponent(new GridFieldButtonRow('before'));
$contentBlocksFieldConfig->addComponent(new GridFieldAddNewButton('buttons-before-left'));
$contentBlocksFieldConfig->addComponent(new CustomGridFieldAddExistingAutocompleter('buttons-before-right'));
$contentBlocksFieldConfig->addComponent(new GridFieldToolbarHeader());
$contentBlocksFieldConfig->addComponent(new GridFieldSortableHeader());
$contentBlocksFieldConfig->addComponent(new GridFieldFilterHeader());
$contentBlocksFieldConfig->addComponent(new GridFieldDataColumns());
$contentBlocksFieldConfig->addComponent(new GridFieldEditButton());
$contentBlocksFieldConfig->addComponent(new GridFieldDeleteAction(true));
$contentBlocksFieldConfig->addComponent(new GridField_ActionMenu());
$contentBlocksFieldConfig->addComponent(new GridFieldPageCount('toolbar-header-right'));
$contentBlocksFieldConfig->addComponent(new GridFieldPaginator(25));
$contentBlocksFieldConfig->addComponent(new GridFieldDetailForm());

$contentBlocksField = GridField::create(
    'ContentBlocks', 
    'Content Blocks', 
    $this->ContentBlocks(), 
    $contentBlocksFieldConfig
);

上面的配置组件设置是基于GridFieldConfig_RelationEditor设置。我们可以使用 GridFieldConfig_RecordEditor 的组件或任何其他配置。

此外，为了使自动完成器向右对齐，我们将 'buttons-before-right' 作为参数传递，如下所示:

->addComponent(new CustomGridFieldAddExistingAutocompleter('buttons-before-right'))

这是假设 CustomGridFieldAddExistingAutocompleter 具有与 GridFieldAddExistingAutocompleter 相同的构造函数.