how to show/ hide column in a extjs 3 grid panel

Question

I have a grid panel i need to show / hide columns in a grid panel depending on the value of a checkbox. If the checkbox is checked i need to display column in the grid and i

Answer 1

In ExtJS 4 gain access to your grid panel, and then access the columns attribute which is an array of Column objects.

From there you can use the array iterator methods ( http://www.diveintojavascript.com/core-javascript-reference/the-array-object ) to perform an action.

In the below example I hide and show a few of the columns based on their header names, but you can obviously perform action based on any Column attribute.

var grid = Ext.getCmp( 'my_grid_panel' );

grid.columns.forEach( function( col ) {
   if( ( col.text == "Foo" ) || ( col.text == "Bar" ) ) {
      col.setVisible( true );
   } else if( col.text == "Baz" ) {
      col.setVisible( false );
   }
});

Answer 2

In Ext JS 4.1, to hide a column, you use:

grid.columns[0].setVisible(false);

Looks like getColumnModel() with its setHidden() method is no longer part of the grid: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

Answer 3

You can show/hide columns using column header menu - you can choose which column you want to have shown. Anyway, if you want to show/hide a column, try this

myGrid.getColumnModel().setHidden(0, true);

Answer 4

setVisibleColumn       : function(name, flag) {
    name = Ext.Array.from(name);
    var column;

    for (var i = 0; i < name.length; i++) {
        column = this.getColumn(name[i]);
        if (column) {
            flag ? column.show() : column.hide();
        }
    }

}

Answer 5

if take a look at the ExtJS API, particulary the ColumModel there is a setHidden method, it would hide/show a column in a GridPanel.

myGrid.getColumnModel().setHidden(0, true);

you should also hook the onchange event of your check box so you can show or hide the column

Answer 6

The answers above I think are pretty good. But let me give you a advice.

1) In ExtJS 4.x it is recommended to use Ext.ComponentQuery`s methods instead of Ext.getCmp()

2) To hide/show columns of the grid you can use following code

Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].hide()

or to show

Ext.ComponentQuery.query('grid gridcolumn[dataIndex^="service"]')[0].show()

It should resolve hiding/showing any column in a grid.

Here grid is your grid , it maybe id or xtype etc.