Geek Answers Handbook

ExtJS4 Display a nested model in a grid with a group header

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 an example of JSON data for 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 such a grouped header.

enter image description here

Please note that each order does not have the same number of Tasks with each other, but the maximum number of tasks for all orders is set.

I searched the entire Sencha forum, but I could not find a solution for this. :(

+4
source share
1 answer

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

0
source

More articles:


All Articles