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

Question

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.

Answer 1

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