ext 4 beta - 在面板详细信息视图中显示多个项目

Question

我正在尝试将 Ext 用于我的一个小项目，但在尝试实现以下内容时有点迷失：我有订单，每个订单将包含 1 个或多个 PurchaseItem 元素。我已经建立了一个显示订单列表并具有详细视图的手柄。如何在详细视图中显示每个订单的 PurchaseItem 的详细信息？

有没有办法遍历 OrderDetailsMarkup 中的每一个？

下面是我的代码：

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<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();

});

这是网格处理的 json 示例：

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

Answer 1

我认为您的问题是您对XTemplate 的理解。 more info
在文档中，有一些示例如何使用XTemplate（以及如何使用嵌套模板）..
这对我有用...

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();
});