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

Question

I have two models:

Order

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

and Task

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

this is the example JSON data for the orders

[{
    "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
    }]
}];

And I want to display it on a grid with grouped header like this.

Note that, every Order doesn't have the same number of Tasks with each other, but the maximum number of tasks on all orders is given.

I've search all the Sencha forum but I couldn't find any solution for this. :(

Answer 1

You cannot group headers in extjs. You can, however, group them as in this example http://docs.sencha.com/ext-js/4-0/#!/example/grid/groupgrid.html