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

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

Ответ 1

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

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

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

Ответ 2

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

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

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

Ответ 3

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

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

Ответ 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 );
   }
});

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

Ответ 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();
        }
    }

}