Sencha Touch2：解析嵌套的 Json 数据

Question

您好，我是 Sencha Touch2 的新手，在解析嵌套的 Json 数据并显示在列表中时遇到问题。 这是我的 Json 的样子：

[{"task":
{"agent":{"activeFlag":"false",
    "shiftId":"0","id":"0","deleteFlag":"false"},
      "id":"124","status":"Unassigned",
    "assignment":{"pnr":
    {"locator":"ABCDEF","connectTime":"0","id":"0"},
        "id":"123",
        "alerts":"Delay"
        "customers":[
            {"frequentNumber":"12345",
                "doNotMissFlag":"false",
                "customerScore":"0",
                "lastName":"XYZ",
                "firstName":"ABC",
                "primaryFlag":"true",
                "customerId":"56789"},
             {"frequentNumber":"987654",
                 "doNotMissFlag":"false",
                 "customerScore":"0",
                 "lastName":"PQR",
                "firstName":"STU ",
                 "cartNumber":"0",
                 "primaryFlag":"false",
                 "customerId":"54321"}]},
  }},
    {"task":{"agent":{......

能够获取“代理”值、“分配”值但无法获取“客户”。 这是模型。 模型列表.js：

Ext.define('CustomList.model.ModelList', {
    extend: 'Ext.data.Model',
    xtype:'modelList',
    requires:['CustomList.model.Customers'],
    config: {
            fields:['task'],
        proxy:{
            type:'ajax',
            url:'http://localhost:9091/CustomListJson/app/store/sample.json',
            reader:{
            type:'json'

        }
    },
    hasMany:{model:'CustomList.model.Customers',
             name:'customers'}
    }

});

Customers.js：

Ext.define('CustomList.model.Customers', {
    extend: 'Ext.data.Model',
    config: {
        fields: [
            'firstName','lastName'
        ],
        belongsTo: "CustomList.model.ModelList"
    }

});

这是我的 ShowList.js：

Ext.define('CustomList.view.ShowList',{
    extend:'Ext.Panel',
    xtype:'showList',
    config:{
        layout:'fit',
        styleHtmlContent:'true',
        styleHtmlCls:'showListCls',
        items:[
            {
                xtype:'list',
                id: 'listitems',
                store:'StoreList',
                itemTpl:['{task.assignment.alerts}', '<div>',
                    '<h2><b>FirstName: </b></h2>',
                    '<tpl for="Customers">',      // could not able to get and show in list
                    '<div> - {firstName}</div>',  // could not able to get and show in list
                    '</tpl>',
                    '</div>']
 // am able get the below values in list
//                itemTpl:'{task.assignment.alerts}'
//                itemTpl:'{task.assignment.pnr.locator}'
//                  itemTpl:'{task.agent.activeFlag}'
//                itemTpl: '<b>{firstName} {lastName}     </b><br>'+'pnr: '+ '{locator}  <br>' +
//                    'Alerts: <font color="#990000">'+'{alerts} </font>' +'status: '+'{status} '
               }]


    }
});

这是我的 StoreList.js：

Ext.define('CustomList.store.StoreList', {
    extend:'Ext.data.Store',
    requires:['Ext.data.reader.Json'],
    config:{
        model:'CustomList.model.ModelList',
        autoLoad:'true'

    }
});

我已经关注了这个：http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.reader.Reader 但无法在列表中显示。谁能帮帮我吗。谢谢。

Answer 1

我得到了我的问题的解决方案。 我在 ShowList.js 中进行了更改： 用这个：

   itemTpl:['{task.assignment.alerts} <div>',
                    '<tpl for="task.assignment.customers">',
                    'firstName: {firstName}<br>',
                    '</tpl> </div>'
                ].join('')

使用上面我可以显示“客户”的项目。谢谢。