4

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

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

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

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

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

4

2 回答 2

10

提供了一个“重新配置”事件，该Ext.grid.Panel事件在任何时候reconfigure()调用该方法后都会触发。然而，在当前 4.1 版本的 ExtJs 中，RowEditing 插件并没有挂钩这个事件！

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

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

起初，我尝试了十几种不同的方式重新配置行编辑器。我尝试调用内部方法、init 方法、resize 方法等……然后我注意到架构的一些优点。有一个对 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)
}
于 2012-08-15T03:49:04.270 回答
1

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

于 2013-02-07T20:10:58.447 回答