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

Question

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

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

这特别令人沮丧,因为RowEditing插件已经监视添加/删除/调整列并正确处理这些列.我怀疑这只是当前版本的ExtJs的疏忽.

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

经过大量的谷歌搜索后,看起来我并不是唯一一个寻找具有内联编辑支持的易于重新配置的列列表的人.

Answer 1

该Ext.grid.Panel规定在任何时间后发射了"重新配置"事件reconfigure()方法被调用.但是,在ExtJs的当前4.1版本中,RowEditing插件不会挂钩此事件!

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

RowEditing插件创建了一个RowEditor组件的实例(得到它？保持这两个分开在你的脑海中,类似的名称,但不同的组件!).RowEditing插件与网格连接成必要的事件,以了解何时显示行编辑器等.RowEditor是弹出行的可视组件,用于在网格中进行内联编辑.

起初我尝试重新配置行编辑器可能有十几种不同的方式.我尝试调用内部方法,init方法,调整大小方法等等......然后我注意到了一些关于架构的好东西.对RowEditor实例有一个单独的内部引用,其中包含一个获取行编辑器和延迟加载的方法(如果需要).那是关键!

您可以在不破坏RowEditing插件的情况下销毁RowEditor(您无法动态加载/卸载插件),然后重新创建RowEditor.

还有一个抓,这是编辑插件的内线网添加一些扩展方法,每列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)
}