extJs 5 - 网格多级分组

extJs 5 - grid multiple level grouping

本文关键字：多级 网格 extJs      更新时间：2023-09-26

我正在寻找一种按月和按年对月进行分组的方法......两个级别的分组。目前，我只能按年份对数据进行分组...

谁能帮我？

我的模型 ：

Ext.define('User', {
extend: 'Ext.data.Model',
fields: [ 
// 'name', 
// 'email', 
'phone' ]});

我的数据 ：

var userStore = Ext.create('Ext.data.Store', {
model: 'User',
data: [
    { year: '2015', month : 'march', phone: '555-111-1224' },
    { year: '2015', month : 'april', phone: '555-222-1234' },
    { year: '2014', month : 'march', phone: '555-222-1244' },
    { year: '2014', month : 'april', phone: '555-222-1254' }
],
groupField: 'year'});

网格 ：

Ext.application({
name   : 'MyApp',
launch : function() {
    Ext.create('Ext.grid.Panel', {
        renderTo: Ext.getBody(),
        features: [{ ftype: 'grouping' }],
        store: userStore,
        width: 250,
        height: 300,
        title: 'Application Users',
        columns: [
            {
                text: 'Phone Number',
                flex: 1,
                dataIndex: 'phone',
                sortable: false,
                hideable: false
            }
        ]
    });
}});

提前感谢！梅耶斯

在商店中，尝试使用分组程序配置而不是 groupField。 它将使您在如何对数据进行分组方面具有更大的灵活性。

下面是方案的示例：

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { year: '2015', month : 'march', phone: '555-111-1224' },
        { year: '2015', month : 'april', phone: '555-222-1234' },
        { year: '2014', month : 'march', phone: '555-222-1244' },
        { year: '2014', month : 'april', phone: '555-222-1254' }
    ],    
    grouper: {
        groupFn: function(item) {
            return 'Month: ' + item.get('month') + ', Year: ' + item.get('year');
        }
    }
);

请参阅 https://fiddle.sencha.com/#fiddle/jh9 以查看它的实际效果。

相关文章：