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 if it is unchecked i need to hide the column in the grid.

Here is my code

var chkEnableDisplayResponsibilityForAction = '<%=Session["chkEnableDisplayResponsibilityForAction"]%>';

 var flags = Boolean.parse(chkEnableDisplayResponsibilityForAction);
 var flags1 = !Boolean.parse(chkEnableDisplayResponsibilityForAction)

 var colModel = new Ext.grid.ColumnModel([
 { header: "PricePlanID", width: 100, sortable: true, dataIndex: 'PricePlanID', hidden: flags, hideable: flags1 },
  ]);  

when i refresh the page i am not able to toggle the columns depending on the value of the checkbox. But when i login and log out i am able to see the changes in the grid panel. Can anyone help me in refreshing the column values in the grid panel?

Answer 1

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 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

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