динамически скрыть ExtJS 4 столбца сетки при группировке по столбцу

Question

У меня есть ExtJS 4 GridPanel, как показано ниже:

var grid = Ext.create('Ext.grid.Panel', { 
    store: store, 
    title: 'grid', 
    columns: [ 
     {text: 'column 1', sortable: true, width: 70, dataIndex: 'column1'}, 
     {text: 'column 2', sortable: true, width: 70, dataIndex: 'column2'}, 
     {text: 'column 3', sortable: true, width: 70, dataIndex: 'column3'}, 
     {text: 'column 4', sortable: true, width: 70, dataIndex: 'column4'}, 
    ], 
    renderTo: Ext.get('gridDiv'), 
    width: 800, 
    height: 600, 
    listeners: { 
    }, 
    features: [{ 
     ftype: 'grouping' 
    }] 
}); 

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

Я понимаю, что это будет обработчик прослушивателя, который улавливает смену группировки, которая затем запускает column.hide().

Некоторые псевдо-код:

... 
listeners: { 
    groupchange: function(store, groupers, eOpts) { 
     groupers.forEach(function(group) { 
      grid.columns.forEach(function(column) { 
       if(column==group) 
        column.hide(); 
       if(column==group) 
        column.show(); 
      } 
     } 
    } 
}, 
... 

Я не уверен, что из документации API groupchange, является ли событие, которое может быть перехвачено сеткой, а не в магазине, как доступа к содержимому groupers , и какие компараторы доступны, чтобы определить, находится ли столбец в groupers.

Как должно быть структурировано это событие слушателя? Каковы правильные события/методы/свойства для использования?

Answer 1

Обнаружено, что скрытие выполняется на слушателе магазина, несмотря на API панели сетки, что делает его похожим на то, что он может быть выполнен в виде прослушивателя сетки. Я работал с первым значением keys в группе, хотя вы могли бы так же легко использовать значение items[0].property.

var store = Ext.create('Ext.data.Store', { 
    ... 
    listeners: 
    { 
     groupchange: function(store, groupers, eOpts){ 
      var column = groupers.keys[0]; 
      productionItemGrid.columns.forEach(function(entry){ 
       if(entry.dataIndex == column) 
       { 
        entry.setVisible(false); 
       } 
       else 
       { 
        entry.setVisible(true); 
       } 
      }); 
     } 
    } 
    ... 
});