ExtJS 4 按商店中的一列进行分组，总计另一列

使用 ExtJS 4 可以轻松地按商店中的一列进行分组，并对另一列进行总计。这个功能对于商店管理系统来说非常有用，可以帮助用户更好地了解商店的销售情况，分析销售数据并做出相应的决策。

javascript
Ext.require([
    'Ext.data.*',
    'Ext.grid.*',
    'Ext.util.*',
    'Ext.grid.feature.Grouping',
    'Ext.grid.feature.GroupingSummary'
]);
Ext.onReady(function() {
    // 创建数据模型
    Ext.define('Shop', {
        extend: 'Ext.data.Model',
        fields: [
            {name: 'name', type: 'string'},
            {name: 'category', type: 'string'},
            {name: 'price', type: 'number'}
        ]
    });
    // 创建数据源
    var store = Ext.create('Ext.data.Store', {
        model: 'Shop',
        groupField: 'category',
        data: [
            {name: '商品A', category: '类别1', price: 10},
            {name: '商品B', category: '类别1', price: 20},
            {name: '商品C', category: '类别2', price: 30},
            {name: '商品D', category: '类别2', price: 40},
            {name: '商品E', category: '类别3', price: 50},
            {name: '商品F', category: '类别3', price: 60}
        ]
    });
    // 创建 Grid
    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        store: store,
        columns: [
            {text: '商品名称', dataIndex: 'name', flex: 1},
            {text: '商品类别', dataIndex: 'category', flex: 1},
            {text: '商品价格', dataIndex: 'price', flex: 1}
        ],
        features: [
            {
                ftype: 'grouping',
                groupHeaderTpl: '{name} ({rows.length} 项)',
                hideGroupedHeader: true,
                startCollapsed: true
            },
            {
                ftype: 'groupingsummary',
                hideGroupedHeader: true
            }
        ]
    });
});