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的理解。更多信息
在文档中，有一些如何使用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();
});