Javascript 使用Ext.grid.Panel.reconfigure（）会中断网格行编辑插件

我正在创建一个extjs网格面板，它有一组用户可配置的列。该组件提供了一种方便的

重新配置（存储、列）

方法来实现这一目的

此方法的工作原理与预期一样，可以重新配置网格的存储/列，而无需完全销毁和重新创建网格。但是，如果您使用插件提供内联行编辑，则在网格重新配置为新列后，列将不同步

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

我希望RowEditor在网格重新配置为新列时更新其编辑器列表和宽度，而不破坏/重新创建网格/视图

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

提供了一个“重新配置”事件，该事件在调用

重新配置（）

方法后被触发。然而，在ExtJs的当前4.1版本中，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)
}

---

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

什么是“我”的定义？我想你在什么地方找到了

me=this

？@AramKocharyan是的，对不起，在我的许多例程开始时，我使用了

var me=this行以消除
此
的含义歧义，尤其是在闭包中。这句话特别糟糕，因为我用的是我和这个！我将编辑答案，仅将此

用于本文目的。谢谢！这也是我尝试过的，但由于我在与

侦听器

相同的对象中定义了

onReconfigure

，因此在该阶段不可用。这两个属性是否位于不同的位置，例如子类？@AramKocharyan它都在一个文件中。它应该很好用。我怀疑这与如何/何时应用侦听器有关（这是您提到的计时部分）。我在

initComponent

中应用监听器，这意味着整个类已经被定义并准备好使用。如果你需要一些帮助，用你的源代码发布一个新的stackoverflow问题，我来看看。