UAS2.0_DEV_TEST/app/view/grid/grouped/Panel.js

/**
 * This example shows how to use the grouping feature of the Grid.
 */
Ext.define('uas.view.grid.grouped.Panel', {
    extend: 'Ext.grid.Panel',
    xtype: 'grouped-grid',
    controller: 'grouped-grid',

    requires: [
        'uas.model.Restaurant',
        'uas.store.Restaurants'
    ],

    bind: '{restaurants}',

    columns: [{
        text: 'Name',
        dataIndex: 'name',
        summaryType: 'count',
        summaryRenderer: function(value, summaryData, dataIndex) {
            return Ext.String.format('共有{0}条数据', value);
        },
        flex: 1
    }, {
        text: 'Cuisine',
        dataIndex: 'cuisine',

        flex: 1
    }, {
        text: 'Rating',
        dataIndex: 'rating',
        flex: 1
    }],

    features: [{
        ftype: 'grouping',
        startCollapsed: true,
        groupHeaderTpl: '{columnName}: {name} ({rows.length} Item{[values.rows.length > 1 ? "s" : ""]})'
    }, {
        ftype: 'summary',
        fixed: true
    }],

    viewModel: {
        data: {
            groupBy: null
        },
        stores: {
            restaurants: {
                type: 'restaurants',
                autoLoad: false,
                listeners: {
                    groupchange: 'onGroupChange',
                    buffer: 100
                }
            }
        }
    },

    viewConfig: {
        listeners: {
            groupcollapse: 'onGroupCollapse',
            groupexpand: 'onGroupExpand'
        }
    },

    tbar: ['->', {
        xtype: 'tool',
        type: 'plus',
        handler: 'onExpandAll',
        tooltip: 'Expand all groups',
        bind: {
            hidden: '{!groupBy}'
        }
    }, {
        xtype: 'tool',
        type: 'minus',
        handler: 'onCollapseAll',
        tooltip: 'Collapse all groups',
        bind: {
            hidden: '{!groupBy}'
        }
    // }, {
    //     text: 'Toggle groups...',
    //     reference: 'groupsBtn',

    //     bind: {
    //         disabled: '{!groupBy}'
    //     },
    //     destroyMenu: true,
    //     menu: {
    //         hideOnScroll: false,
    //         items: []
    //     }
    }],

    fbar: [{
        text: 'Disable Grouping',
        handler: 'onDisableGroupingClick',
        bind: {
            hidden: '{!groupBy}'
        }
    }, {
        text: 'Enable Grouping',
        handler: 'onEnableGroupingClick',
        bind: {
            hidden: '{groupBy}'
        }
    }]
});