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

当我刷新页面时，无法根据复选框的值切换列。但是当我登录并退出登录时，我能够在网格面板中看到更改。请问有谁可以帮助我刷新网格面板中的列值？

- xrx215

---

两分钟内获得了18k的浏览量..... - starbeamrainbowlabs

ExtJs 4：https://dev59.com/plfUa4cB1Zd3GeqPGk-_ - Justin

可能是重复的问题：ExtJs4 - What is the equivalent to the grid ColumnModel? - durtto

Answer 1

如果查看ExtJS API，特别是 ColumnModel，那里有一个setHidden方法，它可以隐藏/显示 GridPanel 中的列。

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

你还应该挂钩复选框的 onchange 事件，这样你就可以显示或隐藏列。

- RageZ

---

复选框位于另一页，设置了一个标志，根据网格面板中标志列的值，它会显示或隐藏。现在它运行得非常完美。 感谢您的回复。 - xrx215

此功能在4.0+版本中已被弃用。 - third_eye

Answer 2

在 Ext JS 4.1 中，隐藏列的方法是：

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

看起来 getColumnModel() 方法及其 setHidden() 方法不再是表格的一部分： http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

- tstojecki

---

速记：grid.columns[0].hide() 这行代码的意思是隐藏网格的第一个列。更多信息请参考http://docs.sencha.com/ext-js/4-1/source/AbstractElement.html#Ext-dom-AbstractElement-method-hide - v1r00z

Answer 3

您可以使用列标题菜单显示/隐藏列 - 您可以选择要显示的列。无论如何，如果您想要显示/隐藏某个列，请尝试以下操作。

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

- Igor Pavelek

Answer 4

在ExtJS 4中，获取您的网格面板，然后访问列属性，该属性是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 );
   }
});

- Poul

---

这里唯一的问题是 - 假设有六列，你想最初只显示五列，然后只有在复选框被选中时才显示第六列。但在我上面的代码中，它会显示所有六列[col.hidden = true]在这种情况下起作用。 所以，我最终将所有列的隐藏设置为true，并在beforerender中运行此代码。这样就可以解决问题了。 - Roshan Khandelwal

Answer 5

这里的回答我认为已经很好了。 但是让我给你一些建议。

1）在 ExtJS 4.x 中，建议使用 Ext.ComponentQuery 的方法代替 Ext.getCmp() 2）要隐藏/显示网格的列，可以使用以下代码

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

或者展示

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

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

这里的grid是您的网格，可以是id或xtype等。

- Almas

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

}

- Luis Munoz

---

你能在你的回答中加入一些解释吗？ - Paul Floyd