使用 Ext.grid.Panel.reconfigure(） 会破坏网格 RowEditing 插件

Using Ext.grid.Panel.reconfigure() breaks the grids RowEditing plugin

本文关键字：网格 RowEditing 插件 grid Ext Panel reconfigure 使用      更新时间：2023-09-26

我正在创建一个extjs网格面板，其中包含一组用户可配置的列。Ext.grid.Panel组件为此提供了一种方便的reconfigure(store, columns)方法。

此方法按预期工作，以重新配置网格的存储/列，而无需完全销毁和重新创建网格。但是，如果您使用 Ext.grid.plugins.RowEditing 插件提供内联行编辑，则在网格重新配置新列后，列将不同步。

这尤其令人沮丧，因为 RowEdit 插件已经监视添加/删除/调整列的大小并正确处理这些列。我怀疑这只是当前 ExtJs 4.1 版本中的一个疏忽。

我想要的是 RowEditor 在网格重新配置新列时更新其编辑器列表和宽度，而不会破坏/重新创建网格/视图。

经过多次谷歌搜索，似乎我不是唯一一个在寻找具有内联编辑支持的易于重新配置的列列表的人。

Ext.grid.Panel提供了一个"重新配置"事件，该事件在调用reconfigure()方法后触发。但是，在当前的 ExtJs 4.1 版本中，RowEdit 插件不会与此事件挂钩！

看来我们需要自己做一些繁重的工作。最终的解决方案相当简单，尽管花了几个小时才得出最终代码。

RowEditing 插件创建了一个 RowEditor 组件的实例（明白了吗？记住这两个组件是分开的，名称相似但组件不同！）。RowEditing 插件与网格挂钩到必要的事件中，以了解何时显示行编辑器等。RowEditor 是在行上弹出的可视组件，用于网格中的内联编辑。

起初，我尝试重新配置行编辑器，可能有十几种不同的方式。我尝试调用内部方法、初始化方法、调整大小方法等......然后我注意到建筑的一些优点。有一个对 RowEditor 实例的内部引用，其中包含一个获取行编辑器和延迟加载（如果需要）的方法。这才是关键！

您可以在不销毁 RowEditing 插件的情况下销毁 RowEditor（您无法动态加载/卸载插件），然后重新创建 RowEditor。

还有一个问题，那就是 Ext 网格的编辑插件为getEditor()和setEditor()的每一列添加了一些扩展方法，用于获取/设置每列的正确编辑器类型。当您重新配置网格时，任何应用的扩展方法都将"消失"（好吧，您有一些从未应用过这些方法的新列）。因此，您还需要通过在插件上调用 initFieldAccessors() 方法来重新应用这些访问器方法。

这是我对网格面板重新配置事件的处理程序：

/**
* @event reconfigure
* Fires after a reconfigure.
* @param {Ext.grid.Panel} this
* @param {Ext.data.Store} store The store that was passed to the {@link #method-reconfigure} method
* @param {Object[]} columns The column configs that were passed to the {@link #method-reconfigure} method
*/
onReconfigure: function (grid, store, columnConfigs) {
    var columns = grid.headerCt.getGridColumns(),
        rowEditingPlugin = grid.getPlugin('rowEditor');
    //
    // Re-attached the 'getField' and 'setField' extension methods to each column
    //
    rowEditingPlugin.initFieldAccessors(columns);
    //
    // Re-create the actual editor (the UI component within the 'RowEditing' plugin itself)
    //
    // 1. Destroy and make sure we aren't holding a reference to it.
    //
    Ext.destroy(rowEditingPlugin.editor);
    rowEditingPlugin.editor = null;
    //
    // 2. This method has some lazy load logic built into it and will initialize a new row editor.
    //
    rowEditingPlugin.getEditor();
}

我使用配置侦听器将其附加到我的网格面板中：

listeners: {
    'reconfigure': Ext.bind(this.onReconfigure, this)
}

这个问题似乎已经在最新的 ExtJS 版本中得到了纠正——版本 4.1.1a 至少集成了类似于 Ben Swayne 实现的功能。

相关文章：