在列上分组时动态隐藏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使隐藏看起来像可以作为网格侦听器来完成，但是隐藏仍在商店侦听器上完成。 尽管您可以轻松地使用items[0].property值，但我已经研究了石斑鱼中的第一个keys数组值。

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