ext 4 beta - show multiple items in panel details view

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?

Is there a way to loop through each in the OrderDetailsMarkup?

Here is my code below:

Ext.require([
             'Ext.grid.*',
             'Ext.data.*',
             'Ex开发者_C百科t.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<br />',
        '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();

});

Here is a sample of json that the grid deals with:

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

i think your problem is your understanding about XTemplate. more info
in docs, there are some example how to use XTemplate (also how to use nested template)..
this is works for me...

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',
                 'purchase_items' //add this if you try to manipulate it, 
                 ]
    });

    var store = Ext.create('Ext.data.Store',{
        model: 'Order',
        proxy: {
            type: 'ajax',
            url: 'order.json',
            reader: 'json'
        }
    });

    var grid = Ext.create('Ext.grid.Panel',{
        store: store,
        columns: [
                  {text: '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: 150,
        split: true,
        region: 'north'
    });

    /* i got error if use Ext.create
    var OrderDetailsMarkup = [
        'Some details<br />',
        'status: {status}<br>',
        '<tpl for="purchase_items">',     //looping
            '<hr>',
            '{#}. {picture_name}',
        '</tpl>'
    ];
    var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
    */

    var OrderTpl = new Ext.XTemplate(
        'Some details<br />',
        'status: {status}<br>',
        '<tpl for="purchase_items">',// this is how to looping
            '<hr>',
            '{#}. {picture_name}',
        '</tpl>'
    );

    Ext.create('Ext.Panel', {
        renderTo: Ext.getBody(),
        frame: true,
        title: 'Manage Orders',
        width: 600,
        height: 500,
        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();
});