Question

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.

Answer 1

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)
}