title: ExtJS4 Displaying Nested Model in Grid with Grouped Header
body: <p>I have two models:</p>
  
  <p>Order</p>
  
  <pre><code>Ext.define('app.model.Order', {
      extend: 'Ext.data.Model',
      fields: [
      'name', 
      'plannedStartDate',
      ],
      hasMany: {
          model: 'Task', 
          name: 'tasks'
      }
  });
  </code></pre>
  
  <p>and Task</p>
  
  <pre><code>Ext.define('app.model.Task', {
      extend: 'Ext.data.Model',
      fields: [
      'hours',
      'workCenter'
      ]
  });
  </code></pre>
  
  <p>this is the example JSON data for the orders</p>
  
  <pre><code>[{
      "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
      }]
  }];
  </code></pre>
  
  <p>And I want to display it on a grid with grouped header like this.</p>
  
  <p><img src="https://i.stack.imgur.com/vqSpW.png" alt="enter image description here"></p>
  
  <p>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.</p>
  
  <p>I've search all the Sencha forum but I couldn't find any solution for this. :(</p>