Nas
Nas

Reputation: 887

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

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.

Upvotes: 3

Views: 5823

Answers (1)

Nas
Nas

Reputation: 887

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();
    

Upvotes: 4

Related Questions