javascript - 如何在面板中添加 2 个按钮来折叠/展开 ExtJs 网格中的所有组？

Question

我有一个面板，里面有一个网格，所以我的问题是如何有 2 个按钮来折叠/展开网格中的所有组？我对 ExtJ 还很陌生。

这是我正在使用的代码。它工作得很好。

var store = Ext.create('Ext.data.Store', {
fields: ['name', 'seniority', 'department'],
groupField: 'department',
data: [
    { name: 'Michael Scott', seniority: 7, department: 'Management' },
    { name: 'Dwight Schrute', seniority: 2, department: 'Sales' },
    { name: 'Jim Halpert', seniority: 3, department: 'Sales' },
    { name: 'Kevin Malone', seniority: 4, department: 'Accounting' },
    { name: 'Angela Martin', seniority: 5, department: 'Accounting' }
]
});

Ext.create('Ext.grid.Panel', {
title: 'Employees',
store: store,
columns: [
    { text: 'Name', dataIndex: 'name', flex: 1 },
    { text: 'Seniority', dataIndex: 'seniority', flex: 1 }
],
features: [{ftype:'grouping'}],
renderTo: Ext.getBody()
});

也许在面板中使用dockedItem将是我想要的方式。

Answer 1

对于按钮，我想您会使用网格上的工具栏:

tbar:[{
    iconCls:'x-fa fa-plus-square',
    handler:function(btn) {
        btn.up('grid').getView().findFeature("grouping").expandAll();
    }
},{
    iconCls:'x-fa fa-minus-square',
    handler:function(btn) {
        btn.up('grid').getView().findFeature("grouping").collapseAll();
    }
}]