Как показать/скрыть столбец в панели решетки 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 }, 
    ]); 

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

Answer 1

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

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

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

Answer 2

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

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

Answer 3

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

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

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

Answer 4

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

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

Он должен разрешить скрытие/отображение любого столбца в сетке.

Здесь сетка - это ваша сетка, возможно, id или xtype и т. Д.

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

}