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

Posted 2023-02-26

【中文标题】如何在 extjs 3 网格面板中显示/隐藏列

【英文标题】：how to show/ hide column in a extjs 3 grid panel

【发布时间】：2009-11-25 15:18:00

【问题描述】：

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

这是我的代码

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

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

【问题讨论】：

18k 观看次数在两分钟内.....

ExtJs 4：***.com/questions/6042138/…

ExtJs4 - What is the equivalent to the grid ColumnModel?的可能重复

【参考方案1】：

如果看一下 ExtJS API，特别是 ColumModel 有一个 setHidden 方法，它将隐藏/显示 GridPanel 中的一列。

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

您还应该钩住复选框的onchange 事件，以便您可以显示或隐藏该列

【讨论】：

复选框位于另一个设置了标志的页面中，并且根据网格面板中标志列的值可见或隐藏。它现在工作完美。感谢您的回复。

这在 4.0+ 中已弃用

【参考方案2】：

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

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

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

【讨论】：

速记：grid.columns[0].hide() docs.sencha.com/ext-js/4-1/source/…

【参考方案3】：

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

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

【参考方案4】：

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

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

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

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

【讨论】：

这里唯一的问题是 - 假设有六列，您最初希望显示五列，然后仅在选中复选框时才显示第六列。在我上面的代码中，它显示所有六列 [col.hidden=true] 在这种情况下有效。所以我最终将所有列的 hidden 设置为 true 。并在 beforerender 中运行此代码。那行得通

【参考方案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 等。

【参考方案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();
        
    

【讨论】：

您能否为您的答案添加一些解释？