ExtJS4使用分组标题在网格中显示嵌套模型

时间:2011-08-31 05:38:56

标签: extjs extjs4

我有两种模式:

顺序

Ext.define('app.model.Order', {
    extend: 'Ext.data.Model',
    fields: [
    'name', 
    'plannedStartDate',
    ],
    hasMany: {
        model: 'Task', 
        name: 'tasks'
    }
});

和任务

Ext.define('app.model.Task', {
    extend: 'Ext.data.Model',
    fields: [
    'hours',
    'workCenter'
    ]
});

这是订单的示例JSON数据

[{
    "name":3001,
    "plannedStartDate":501,
    "tasks":[{
        "hours":10,
        "workCenter":2
    },{
        "hours":15,
        "workCenter":1
    },{
        "hours":20,
        "workCenter":5
    },{
        "hours":80,
        "workCenter":4
    },{
        "hours":80,
        "workCenter":3
    }]
},{
    "name":3002,
    "plannedStartDate":510,
    "tasks":[{
        "hours":20,
        "workCenter":4
    },{
        "hours":30,
        "workCenter":3
    },{
        "hours":30,
        "workCenter":1
    },{
        "hours":40,
        "workCenter":5
    }]
},{
    "name":3005,
    "plannedStartDate":503,
    "tasks":[{
        "hours":20,
        "workCenter":1
    },{
        "hours":30,
        "workCenter":2
    },{
        "hours":60,
        "workCenter":3
    },{
        "hours":80,
        "workCenter":4
    },{
        "hours":40,
        "workCenter":5
    }]
},{
    "name":3006,
    "plannedStartDate":504,
    "tasks":[{
        "hours":10,
        "workCenter":3
    },{
        "hours":10,
        "workCenter":4
    },{
        "hours":30,
        "workCenter":1
    },{
        "hours":80,
        "workCenter":2
    },{
        "hours":80,
        "workCenter":5
    }]
},{
    "name":3007,
    "plannedStartDate":502,
    "tasks":[{
        "hours":5,
        "workCenter":4
    },{
        "hours":10,
        "workCenter":3
    },{
        "hours":40,
        "workCenter":2
    },{
        "hours":40,
        "workCenter":1
    }]
},{
    "name":3008,
    "plannedStartDate":515,
    "tasks":[{
        "hours":40,
        "workCenter":5
    },{
        "hours":60,
        "workCenter":4
    },{
        "hours":40,
        "workCenter":3
    },{
        "hours":60,
        "workCenter":1
    },{
        "hours":80,
        "workCenter":2
    }]
},{
    "name":3009,
    "plannedStartDate":507,
    "tasks":[{
        "hours":15,
        "workCenter":2
    },{
        "hours":20,
        "workCenter":3
    }]
},{
    "name":3010,
    "plannedStartDate":513,
    "tasks":[{
        "hours":5,
        "workCenter":1
    },{
        "hours":20,
        "workCenter":4
    },{
        "hours":30,
        "workCenter":5
    }]
},{
    "name":3011,
    "plannedStartDate":506,
    "tasks":[{
        "hours":20,
        "workCenter":1
    },{
        "hours":20,
        "workCenter":2
    },{
        "hours":20,
        "workCenter":3
    },{
        "hours":80,
        "workCenter":4
    }]
}];

我希望将它显示在带有分组标题的网格上。

enter image description here

请注意,每个订单彼此之间的任务数量不同,但是会给出所有订单上的最大任务数。

我搜索了所有的Sencha论坛,但我找不到任何解决方案。 :(

1 个答案:

答案 0 :(得分:0)

您无法在extjs中对标头进行分组。但是,您可以按照此示例http://docs.sencha.com/ext-js/4-0/#!/example/grid/groupgrid.html

对它们进行分组