ExtJS4 Displaying Nested Model in Grid with Grouped Header

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