javascript - 在列上分组时动态隐藏 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);
                }
            });
        }
    }
    ...
});