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

cqoc49vn  于 2022-09-26  发布在  其他
关注(0)|答案(6)|浏览(507)

我有一个网格面板,需要根据复选框的值在网格面板中显示/隐藏列。如果选中复选框,我需要在网格中显示列,如果不选中,我需要隐藏网格中的列。
这是我的密码

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

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

o4tp2gmn

o4tp2gmn1#

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

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

还应该勾选复选框的onchange事件,以便显示或隐藏列

fumotvh3

fumotvh32#

在Ext JS 4.1中,要隐藏列,可以使用:

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

getColumnModel()及其setHidden()方法似乎不再是网格的一部分:http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.面板

7eumitmz

7eumitmz3#

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

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

fcipmucu4#

在ExtJS 4中,访问网格面板,然后访问columns属性,该属性是Column对象的数组。
从那里可以使用数组迭代器方法(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 );
   }
});
2eafrhcq

2eafrhcq5#

我认为上面的答案很好。但让我给你一个建议。
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等。

cpjpxq1n

cpjpxq1n6#

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

}

相关问题