[英]how to show/ hide column in a extjs 3 grid panel
我有一个网格面板我需要显示/隐藏网格面板中的列,具体取决于复选框的值。 如果选中该复选框,我需要在网格中显示列,如果未选中,我需要隐藏网格中的列。
这是我的代码
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 },
]);
当我刷新页面时,我无法切换列,具体取决于复选框的值。 但是当我登录并注销时,我能够看到网格面板中的更改。 任何人都可以帮我刷新网格面板中的列值吗?
如果看一下ExtJS API,特别是ColumModel有一个setHidden
方法,它会隐藏/显示GridPanel
一列。
myGrid.getColumnModel().setHidden(0, true);
您还应该勾选复选框的onchange
事件,以便显示或隐藏列
在Ext JS 4.1中,要隐藏列,请使用:
grid.columns[0].setVisible(false);
看起来getColumnModel()及其setHidden()方法不再是网格的一部分: http ://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel
您可以使用列标题菜单显示/隐藏列 - 您可以选择要显示的列。 无论如何,如果你想显示/隐藏一列,试试这个
myGrid.getColumnModel().setHidden(0, true);
在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 );
}
});
我认为上面的答案非常好。 但是,让我给你一个建议。
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()
它应该解决隐藏/显示网格中的任何列。
这里的网格是你的网格,它可能是id或xtype等。
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();
}
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.