How to add plugin dynamically in Ext JS Grid after grid loaded

3
votes

I'm using GridHeaderFilter plugin (http://www.sencha.com/forum/showthread.php?150918-Grid-Header-Filters)

var testGrid = new Ext.grid.GridPanel({
    frame: true,
    minHeight: 200,
    plugins: [new Ext.ux.grid.GridHeaderFilters()],
    columns : [{
        text : 'Test Id',
        sortable : true,
        dataIndex : 'testId',
        filter: {
            xtype: 'textfield',
            type: 'string'
        }
    },                  
});

but when I add some column dynamically to this grid and use grid.reconfigure(null,newColumns[]);

New columns get reflected but GridHeaderPlugin gets disappeared.

Tried this http://www.sencha.com/forum/showthread.php?124179-Dynamically-adding-plugins-to-grid didn't helped.

1
extjsextjs4

1 Answers

4
votes

Two things to do make it work.

  1. First while adding the plugin, assign the plugin as 

    var grid = Ext.create('Ext.grid.Panel',{
    plugins:[Ext.create('Ext.ux.grid.GridHeaderFilters', {
        clicksToEdit: 2,
        pluginId:'gridHeaderPlugin'
    })]
});

  2. while doing dynamic column and after running reconfigure and renderFilters()

    grid.reconfigure(null, newColumns[]);
grid.getPlugin('gridheaderfilters').renderFilters();