Changing grid columns dynamically

[Pravin.Pawar]

Hi,

I want to change grid columns dynamically using ExtJS 4.1. Based on certain parameters from the Menu; I have to fetch data from the DB which returns list of the columns which needs to display in grid.

I have written code to generate dynamic Model in ExtJS and fetching data from AJAX call after Menu item click.

I tried to recreate grid with new columns somehow the grid is showing all previous columns which were loaded before postback and NOT showing newly created grid columns.

Please let me know how should I create grid with new columns.

[sword-it]

HI!
you may try to reconfigure your columns.
grid.reconfigure(store,cols);
check this:-
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel-method-reconfigure

Sample:-

var mycolumns = [
        { header: 'NameA',  dataIndex: 'name' },
        { header: 'EmailA', dataIndex: 'email', flex: 1 },
        { header: 'ChangeA', dataIndex: 'change', tdCls: 'x-change-cell' }
];
grid.reconfigure(undefined,mycolumns);

* i have used undefined because, we have to only reconfigure columns,not store.
check the link, i have given you, you will find there "Either the store or the columns can be omitted".

Either the store or the columns can be omitted" actually means "Either the store or the columns can be undefined/false/null".

[Pravin.Pawar]

thanks... refreshing columns is working fine... now how to reload store which will bring values of newly added columns in grid?

[sword-it]

Hi!

you may use reload method of your grid's store.

sample:-

 
YourGrid.getStore().reload()

also, you may configure the options while reload.

check this:-
http://docs.sencha.com/ext-js/4-1/#!...-method-reload