extjs grid grouping 关闭和展开

Posted 2020-09-26 A-long

Ext.onReady(function() {
    var store = Ext.create(\'Ext.data.Store\', {
        storeId: \'employeeStore\',
        fields: [\'name\', \'seniority\', \'department\'],
        groupField: \'department\',
        data: {
            \'employees\': [
                {"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"}
            ]
        },
        proxy: {
            type: \'memory\',
            reader: {
                type: \'json\',
                root: \'employees\'
            }
        }
    });

   var grid = Ext.create(\'Ext.grid.Panel\', {
        title: \'Employees\',
       name:\'mygrid\',
        store: Ext.data.StoreManager.lookup(\'employeeStore\'),
        dockedItems: [{
            dock: \'top\',
            xtype: \'toolbar\',
            items: [{
                tooltip: \'关闭所有\',
                text: \'关闭所有\',
                enableToggle: true,
                pressed: true,
                handler: function(){
                    var me=this;
                    var view = me.up(\'grid\');
                    console.log(view);
                    view.view.features[0].collapseAll();
                }
            }, {
                    tooltip: \'展开所有\',
                    text: \'展开所有\',
                    enableToggle: true,
                    pressed: true,
                    handler: function(){
                        var me=this;
                        var view = me.up(\'grid\');
                        console.log(view);
                        view.view.features[0].expandAll();
                    }
                }]
        }],
        columns: [
            {text: \'Name\', dataIndex: \'name\'},
            {text: \'Seniority\', dataIndex: \'seniority\'}
        ],
        features: [
            {
                ftype: \'grouping\'
            }
        ],
        listeners: {
            groupclick: function (view, node, group, e, eOpts) {
               view.features[0].collapseAll();
               view.features[0].expand(group);
            }
        },
        width: \'100%\',
        height: \'100%\',
        renderTo: Ext.getBody()
    });
});