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

Question

我有两个型号：

订购

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
    }]
}];

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

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

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

Answer 1

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