SilverStripe：将组件添加到 GridField，将它们分组到 div（工具栏）

Question

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

以下是我的代码

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

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

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

查看此屏幕截图：

如您在屏幕截图中所见，搜索框（添加的自定义组件）超出容器或 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 setup. We could use the components of GridFieldConfig_RecordEditor 或任何其他配置。

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

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

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

SilverStripe：将组件添加到 GridField，将它们分组到 div（工具栏）

SilverStripe: Adding the component to GridField grouping them in a div (toolbar)

silverstripe

silverstripe-4