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

Question

我有一个网格面板，我需要根据复选框的值显示/隐藏网格面板中的列。如果选中该复选框，我需要在网格中显示列，如果未选中该复选框，我需要隐藏网格中的列。

这是我的代码

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

当我刷新页面时，我无法根据复选框的值切换列。但是当我登录和注销时，我可以看到网格面板中的更改。谁能帮我刷新网格面板中的列值？

Answer 1

如果看一下 ExtJS API，特别是 ColumModel，有一个

setHidden

方法，它将隐藏/显示

GridPanel

中的列。

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

您还应该挂钩复选框的

onchange

事件，以便您可以显示或隐藏该列

Answer 2

在 Ext JS 4.1 中，要隐藏列，可以使用：

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

看起来 getColumnModel() 及其 setHidden() 方法不再是网格的一部分： https://docs.sencha.com/extjs/4.1.0/#!/api/Ext.grid.Panel

Answer 3

您可以使用列标题菜单显示/隐藏列 - 您可以选择要显示的列。不管怎样，如果你想显示/隐藏一列，试试这个

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

Answer 4

在 ExtJS 4 中访问网格面板，然后访问 columns 属性，它是 Column 对象的数组。

从那里您可以使用数组迭代器方法（http://www.diveintojavascript.com/core-javascript-reference/the-array-object）来执行操作。

在下面的示例中，我根据标题名称隐藏和显示一些列，但您显然可以根据任何列属性执行操作。

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

上面的答案我觉得都很好。 但让我给你一个建议。

1) 在 ExtJS 4.x 中，建议使用 Ext.ComponentQuery`s 方法而不是 Ext.getCmp()

2）要隐藏/显示网格的列，您可以使用以下代码

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

或展示

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

它应该解决隐藏/显示网格中任何列的问题。

这里 grid 是你的网格，它可能是 id 或 xtype 等。

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

}