как показать/скрыть столбец на панели сетки extjs 3

У меня есть панель сетки, мне нужно показать/скрыть столбцы на панели сетки в зависимости от значения флажка. Если флажок установлен, мне нужно отобразить столбец в сетке, а если он не отмечен, мне нужно скрыть столбец в сетке.

Вот мой код

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

когда я обновляю страницу, я не могу переключать столбцы в зависимости от значения флажка. Но когда я вхожу и выхожу из системы, я могу видеть изменения в панели сетки. Может ли кто-нибудь помочь мне обновить значения столбцов на панели сетки?


person xrx215    schedule 25.11.2009    source источник
comment
18 тысяч просмотров за две минуты.....   -  person starbeamrainbowlabs    schedule 25.07.2012
comment
ExtJs 4: stackoverflow.com/questions/6042138/   -  person Justin    schedule 30.07.2012
comment
Возможный дубликат ExtJs4. Что эквивалентно сетке ColumnModel?   -  person durtto    schedule 14.09.2017


Ответы (6)


если взглянуть на ExtJS API, в частности на ColumModel есть метод setHidden, он скрывает/показывает столбец в GridPanel.

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

вы также должны подключить событие onchange вашего флажка, чтобы вы могли показать или скрыть столбец

person RageZ    schedule 25.11.2009
comment
Флажок находится на другой странице, для которой установлен флаг, и в зависимости от значения столбца флага на панели сетки отображается или скрывается. Теперь он работает отлично. Спасибо за ответ. - person xrx215; 25.11.2009
comment
Это устарело в 4.0+ - person third_eye; 27.12.2013

В Ext JS 4.1, чтобы скрыть столбец, вы используете:

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

Похоже, getColumnModel() с его методом setHidden() больше не является частью сетки: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel

person Tom    schedule 25.07.2012
comment
сокращение: grid.columns[0].hide() docs.sencha.com/ext-js/4-1/source/ - person v1r00z; 12.04.2013

Вы можете показать/скрыть столбцы, используя меню заголовка столбца - вы можете выбрать, какой столбец вы хотите показать. В любом случае, если вы хотите показать/скрыть столбец, попробуйте это

myGrid.getColumnModel().setHidden(0, true);
person Igor Pavelek    schedule 25.11.2009

В ExtJS 4 получите доступ к панели сетки, а затем получите доступ к атрибуту столбца, который представляет собой массив объектов столбца.

Оттуда вы можете использовать методы итератора массива ( 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 );
   }
});
person Poul    schedule 25.07.2012
comment
Единственная проблема заключается в следующем: скажем, есть шесть столбцов, и вы хотите сначала показать пять, а затем показать шестой, только если флажок установлен. и в моем случае с приведенным выше кодом он показывает, что все шесть столбцов [col.hidden = true] работают в этом случае. И поэтому я изначально установил скрытый как истинный для всех столбцов. И запускаем этот код в beforerender. Это работает - person Roshan Khandelwal; 08.12.2014

Ответы выше, я думаю, довольно хороши. Но позвольте дать вам совет.

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 и т. д.

person Almas    schedule 16.08.2016

person    schedule
comment
Не могли бы вы добавить некоторые пояснения к вашему ответу? - person Paul Floyd; 17.07.2017