如何在extjs 3网格面板中显示/隐藏列

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

Answer 5

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.

Answer 6

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

}