使用Ext.grid.Panel.reconfigure（）打破了网格RowEditing插件 [英] Using Ext.grid.Panel.reconfigure() breaks the grids RowEditing plugin

问题描述

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

此方法的工作原理是重新配置网格的存储/列，而不必完全销毁并重新创建网格。但是，如果您使用的是 Ext.grid.plugins.RowEditing 插件以提供内联行编辑，在网格已使用新列进行重新配置后，列将不同步。

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

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

经过很多的搜索，看起来我并不孤单，在搜索一个容易重新配置的列列表与内联编辑支持

解决方案

Ext.grid.Panel 提供了一个重新配置事件，在任何时间调用 reconfigure（）方法。然而，在目前的4.1版本的ExtJs中，RowEditing插件不会钩住这个事件！

似乎我们需要做自己的重担。最终解决方案很简单，虽然花了几个小时才能得到最终的代码。

RowEditing插件创建一个RowEditor组件的实例（得到它）两个在你心目中独立，名称相似，但组件不同！）。 RowEditing插件是绑定到必要事件中的网格，以便知道何时显示行编辑器等。RowEditor是弹出您行的可视化组件，用于在网格中进行内联编辑。

起初我尝试重新配置行编辑器可能有十几种不同的方式。我尝试调用内部方法，init方法，调整大小的方法等...然后我注意到一些关于架构的东西。 RowEditor实例有一个内部引用，只需要一个方法即可获取行编辑器和延迟加载。这是关键！

您可以在不破坏RowEditing插件的情况下销毁RowEditor（您不能动态加载/卸载插件），然后重新创建RowEditor。另外还有一个catch，就是Ext的Editing插件为 getEditor（）的每一列添加一些扩展方法， code>和 setEditor（），用于获取/设置每列的正确编辑器类型。当您重新配置网格时，任何应用的扩展方法都将消失（您有一些从未使用过这些方法的新列）。因此，您还需要通过在插件上调用 initFieldAccessors（）方法来重新应用这些访问器方法。

这是网格面板重新配置事件的处理程序：

  / ** 
 * @event reconfigure 
 *重新配置后触发。 
 * @param {Ext.grid.Panel}这个
 * @param {Ext.data.Store}存储传递给{@link＃method-reconfigure}方法的商店
 * @param {Object []} columns列传递给{@link＃method-reconfigure}方法的配置
 * / 
 onReconfigure：function（grid，store，columnConfigs）{
 var columns = grid.headerCt.getGridColumns（），
 rowEditingPlugin = grid.getPlugin（'rowEditor'）; 
 
 // 
 //将getField和setField扩展方法重新附加到每个列
 // 
 rowEditingPlugin.initFieldAccessors（columns）; 
 
 // 
 //重新创建实际的编辑器（RowEditing插件本身中的UI组件）
 // 
 // 1.销毁和确保我们没有提及它。 
 // 
 Ext.destroy（rowEditingPlugin.editor）; 
 rowEditingPlugin.editor = null; 
 // 
 // 2.此方法在其中内置了一些懒惰负载逻辑，并将初始化新的行编辑器。 
 // 
 rowEditingPlugin.getEditor（）; 
} 
  

我使用配置监听器将其附加到我的网格面板中：

 听众：{
'reconfigure'：Ext.bind（this.onReconfigure，this）
} 
  

I'm creating an extjs grid panel which has a user configurable set of columns. The Ext.grid.Panel component provides a handy reconfigure(store, columns) method for exactly this purpose.

This method works as expected to reconfigure a grid's store/columns without having to completely destroy and recreate the grid. However, if you are using the Ext.grid.plugins.RowEditing plugin to provide inline row editing, the columns get out of sync after the grid has been reconfigured with new columns.

This is particularly frustrating as the RowEditing plugin already watches for add/removing/resizing columns and handles those correctly. I suspect this is just an oversight in the current 4.1 release of ExtJs.

What I want is for the RowEditor to update its editors list and widths when the grid is reconfigured with new columns without destroying/recreating the grid/view.

After much googling it appears I am not alone in the search for an easily re-configurable column list with inline editing support.

解决方案

The Ext.grid.Panel provides a 'reconfigure' event that is fired after any time the reconfigure() method is called. However, in the current 4.1 release of ExtJs the RowEditing plugin does not hook into this event!

It seems we need to do our own heavy lifting. The final solution is rather simple, although it took several hours to arrive at the final code.

The RowEditing plugin creates an instance of the RowEditor component (got it? keep those two seperate in your mind, similar names but different components!). The RowEditing plugin is what ties into the grid hooking into the necessary events to know when to show the row editor, etc.. The RowEditor is the visual component that popups over your row for inline editing in the grid.

At first I tried re-configuring the row editor probably a dozen different ways. I tried calling internal methods, init methods, resize methods, etc... Then I noticed something nice about the architecture. There is a single internal reference to the RowEditor instance with a method to fetch the row editor and lazy load if required. That was the key!

You can destroy the RowEditor without destroying the RowEditing plugin (you can't dynamically load/unload plugins) and then recreate the RowEditor.

There is one more catch, which is that the Editing plugins for the Ext grid add some extension methods to each column for getEditor() and setEditor() which are used to get/set the correct editor type for each column. When you reconfigure the grid, any applied extension methods are 'gone' (well you have some new columns that never had those methods applied). So you also need to re-apply those accessor methods by calling the initFieldAccessors() method on the plugin.

Here is my handler for the grid panel's reconfigure event:

/**
* @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();
}

I attached this in my grid panel using a config listener:

listeners: {
    'reconfigure': Ext.bind(this.onReconfigure, this)
}

这篇关于使用Ext.grid.Panel.reconfigure（）打破了网格RowEditing插件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！