我创建具有用户可配置的一组列的ExtJS的网格面板。 所述Ext.grid.Panel
组件提供一个方便的reconfigure(store, columns)
方法正是这种目的。
此方法效果如预期重新配置网格的存储/列,而无需彻底摧毁和重建电网。 但是,如果您使用的是Ext.grid.plugins.RowEditing
插件提供内嵌的行编辑,列不同步的电网已经重新配置新的列后。
这是特别令人沮丧的RowEditing插件已经手表添加/删除/调整列的大小和正确处理的。 我怀疑这只是在目前的4.1版本ExtJS的的监督。
我想是当电网与新列的重新配置,而不破坏/重新创建网格/视图RowEditor更新它的编辑列表和宽度。
经过一番Google上搜寻它似乎我不是单独在搜索与在线编辑支持易于重新配置的列清单。
所述Ext.grid.Panel
提供被任何时间之后发射一个“重新配置”事件reconfigure()
方法被调用。 然而,在目前的4.1版本ExtJS的的RowEditing插件不挂接到本次活动!
看来我们需要做我们自己的重任。 最终的解决方案是相当简单的,虽然花了几个小时,以获得最终的代码到达。
该RowEditing插件创建RowEditor组件的实例(懂吗?把这两个单独的在你的心中,名称相似,但不同的成分!)。 该RowEditing插件是什么关系到电网挂钩到必要的事件,知道什么时候,以显示该行的编辑器,等。RowEditor是视觉组件,弹出式菜单在你排在网格内联编辑。
起初,我试图重新配置该行可能编辑了十几个不同的方式。 我试着给内部方法,初始化方法,调整方法,等等......然后,我发现了一些关于建筑美观大方。 有一个单一的内部参考RowEditor实例与在需要时读取该行编辑和懒负载的方法。 这是关键!
你可以摧毁RowEditor不破坏RowEditing插件(你不能动态加载/卸载插件),然后重新创建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)
}
看来,这个问题已经被最新版本的ExtJS修正 - 版本4.1.1a至少集成了类似奔Swayne的实现功能。