javascript - Using Ext.grid.Panel.reconfigure() breaks the grids RowEditing plugin - Stack Overflow

admin管理员组

文章数量:1278793

I'm creating an extjs grid panel which has a user configurable set of columns. The Ext.grid.Panel ponent 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 pletely 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.

I'm creating an extjs grid panel which has a user configurable set of columns. The Ext.grid.Panel ponent 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 pletely 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.

• javascript
• web-applications
• extjs
• extjs4.1

Share Improve this question Follow edited Aug 15, 2012 at 4:01 Izhaki 23.6k99 gold badges7272 silver badges107107 bronze badges asked Aug 15, 2012 at 3:49 BenSwayneBenSwayne 16.9k33 gold badges5959 silver badges7777 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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 ponent (got it? keep those two seperate in your mind, similar names but different ponents!). 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 ponent 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 ponent 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)
}

It appears that this problem has since been corrected in the latest ExtJS versions - Version 4.1.1a at least integrates functionality similar to Ben Swayne's implementation.

本文标签： javascriptUsing ExtgridPanelreconfigure() breaks the grids RowEditing pluginStack Overflow