extjs show/hide column dynamically [duplicate]

Question

Possible Duplicate:
how to show/ hide column in a grid panel

In an ext js grid, I have the requirement of hiding/showing a column based on some cond = true/ false.

Can i set the 'hidden' property of a column dynamically?

Answer 1

You can use the beforerender event to hide the column. The event is called before the render function is called to display your grid. The event function take a param which is the grid itself. From this grid object you can get the column model of the grid and call setHidden method to hide the appropriate column. From the grid object you can also get the store attached to the grid for your check.

Here is how the code will be:

listeners: {
    'beforerender' : function(grid) {

        store = grid.getStore();
        if(your-condition) {
            cm = grid.getColumnModel();
            cm.setHidden(0,true);
        }

    }
}

Answer 2

You can check and hide when store loads:

store.load({
    callback: function(){
        // access raw json data and check some columns to hide or not
        if(store.getProxy().getReader().rawData.myColumn.hide) {
            grid.columns[1].setVisible(false);
        }
        if(store.getProxy().getReader().rawData.myAnotherColumn.hide) {
            grid.columns[4].setVisible(false);
        }
    }
});