javascript - 使用 Ext.grid.Panel.reconfigure() 打破网格 RowEditing 插件

Question

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

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

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

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

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

Answer 1

Ext.grid.Panel提供一个“重新配置”事件，该事件在调用 reconfigure() 方法后随时触发。但是，在当前的 ExtJs 4.1 版本中，RowEditing 插件没有挂接到此事件!

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

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)
}