title: ext 4 beta - show multiple items in panel details view
body: <p>I'm trying to adopt Ext for one of my small projects and got bit lost trying to implement the following: I have Orders and each will contain 1 or more PurchaseItem elements. I have built a grip that shows list of Orders and has a detailed view. How do I show details for each Order's PurchaseItem in detailed view?</p>
  
  <p>Is there a way to loop through each in the OrderDetailsMarkup?</p>
  
  <p>Here is my code below:</p>
  
  <pre><code>Ext.require([
               'Ext.grid.*',
               'Ext.data.*',
               'Ext.panel.*',
               'Ext.layout.container.Border'
               ]);
  
  var myDateFormat = "d/m/Y H:i";
  
  Ext.onReady(function(){
  
      Ext.define('Order',{
          extend: 'Ext.data.Model',
          fields: [
                   'date_created',
                   'status',
                   'name',
                   'phone',
                   'delivery_type',
                   'address',
                   'order_price'
                   ]
      });
  
      var store = Ext.create('Ext.data.Store',{
          model: 'Order',
          proxy: {
              type: 'ajax',
              url: '/shopmng/json/list_of_orders/',
              reader: 'json'
          }
      });
  
      var grid = Ext.create('Ext.grid.Panel',{
          store: store,
          columns: [
                    {Date: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
                    {text: 'Status', width: 120, dataIndex: 'status', sortable: true},
                    {text: 'Name', width: 120, dataIndex: 'name', sortable: false},
                    {text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
                    {text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
                    {text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false},
                    {text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
                    ],
          viewConfig: {
              forceFit: true
          },
          height: 400,
          split: true,
          region: 'north'
      });
  
      var OrderDetailsMarkup = [
          'Some details&lt;br /&gt;',
          'status: {status}'
                                ];
  
      var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
  
      Ext.create('Ext.Panel', {
          renderTo: 'management_panel',
          frame: true,
          title: 'Manage Orders',
          width: 1000,
          height: 550,
          layout: 'border',
          items: [grid, {
              id: 'detailPanel',
              region: 'center',
              bodyPadding: 7,
              bodyStyle: 'background: #FFFFFF;',
              html: 'select order to view details'
          }]
      });
  
      grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
          if (selectedRecord.length){
              var detailPanel = Ext.getCmp('detailPanel');
              OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
          }
      });
  
      store.load();
  
  });
  </code></pre>
  
  <p>Here is a sample of json that the grid deals with:</p>
  
  <pre><code>[
    {
      "status": "Новый заказ",
      "delivery_type": "zazap",
      "name": "Alexander Bolotnov",
      "staff_comments": "",
      "notes": "notes",
      "external_order_ref": "",
      "purchase_items": [
        {
          "picture_name": "Трава-мурава",
          "printSize": "60 x 90 (без полей)",
          "picture_id": 1,
          "cost": "1972",
          "price": "1972",
          "quantity": 1,
          "paperType": "Акварельная бумага"
        }
      ],
      "phone": "79264961710",
      "order_price": "2072.00",
      "address": "Moscow, Tvardovsky somewhere",
      "date_created": "2011-04-17T00:12:33.048000",
      "user_name": null,
      "id": 1
    },
    {
      "status": "Новый заказ",
      "delivery_type": "boo!",
      "name": "бишон",
      "staff_comments": "",
      "notes": "",
      "external_order_ref": "",
      "purchase_items": [
        {
          "picture_name": "Трава-мурава",
          "printSize": "60 x 90 (без полей)",
          "picture_id": 1,
          "cost": "3944",
          "price": "1972",
          "quantity": 2,
          "paperType": "Акварельная бумага"
        }
      ],
      "phone": "79264961710",
      "order_price": "4044.00",
      "address": "аааааааааааааааап, вапвапвап",
      "date_created": "2011-04-18T23:13:27.652000",
      "user_name": null,
      "id": 2
    }
  ]
  </code></pre>