ExtJs4 - Load grid columns dynamically?

I was successfully able to load grid columns dynamically in ExtJs3.

However, I have failed to get it working in ExtJs4.

I can load the columns dynamically but I cannot get them to display in the grid.

When the store loads I build a Column Model, I then set the grids columns as this Column Model. After setting the grids columns I tried calling the grid.doLayout() method and also grid.getView().refresh() method but the columns are never displayed.

Below is some example code:

store.on('load', function(st){
    var columnModel = store.data.items;
    grid.columns = columnModel;
    grid.doLayout();

    /**
      * I also tried doing it this way
      **/
    //grid.getColumnModel().setConfig(columnModel);
    //grid.getView().refresh();
});

The grids columns property seems to be getting set correctly but these columns are开发者_JAVA百科 never displayed.

Just for further clarity the column model which I set as the grids columns property looks like this:

[{
    header: 'Name',
    dataIndex: 'empname'
},{
    header: 'Address',
    dataIndex: 'address'
},{
    header: 'Department',
    dataIndex: 'dept'
}]

In order to change the grid columns, you need to call grid.reconfigure, you cannot just change the columns property. Reconfigure should trigger all the relevant refresh and redisplay events for you.

ergo, your code should read:

store.on('load', function(st){
   var columnModel = store.data.items;
   grid.reconfigure(store, columnModel);
});