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

我正在创建一个 extjs 网格面板，其中有一组用户可配置的列。这Ext.grid.Panel http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel组件提供了一个方便的reconfigure(store, columns)方法正是为了这个目的。

此方法按预期工作，可以重新配置网格的存储/列，而无需完全销毁并重新创建网格。但是，如果您正在使用Ext.grid.plugins.RowEditing http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.plugin.RowEditing插件提供内联行编辑，在网格重新配置新列后，列会不同步。

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

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

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

The Ext.grid.Panel http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel提供一个“重新配置”事件，该事件在任何时间后触发reconfigure()方法被调用。然而，在当前的 ExtJs 4.1 版本中，RowEditing 插件不会挂钩此事件！

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

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

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

您可以销毁RowEditor而不销毁RowEditing插件（您不能动态加载/卸载插件），然后重新创建RowEditor。

还有一个问题，那就是扩展网格的编辑插件为每一列添加了一些扩展方法getEditor() and 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)
}