Sencha Touch2：在列表中单独显示嵌套的Json数据

Question

我是sencha touch2的新手，在列表中的独立行中显示嵌套的json数据时遇到问题。 这里是我的Json样子：

[ 
    { 
     "work": { 
      "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": [ 
        { 
         "lastName": "XYZ", 
         "firstName": "MNO" 
        }, 
        { 
         "lastName": "PQR", 
         "firstName": "STU " 
        } 
       ] 
      } 
     } 
    }, 
    { 
     "work": { 
      "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": [ 
        { 
         "lastName": "ANY", 
         "firstName": "KLJ" 
        }, 
        { 
         "lastName": "CHE", 
         "firstName": "MAK" 
        } 
       ] 
      } 
     } 
    } 
] 

喜欢我有30个“工作”对象，并在1“工作”，我有1“客户”阵列和我有多个客户里面

我想在列表中显示'客户'在单独行中，但能够像单行一样显示单个'工作'的所有客户。

Output should be: 
--------------- 
delay 
First Name: MNO 
--------------- 
delay 
First Name: STU 
--------------- 
delay 
First Name: KLJ 
--------------- 
delay 
First Name: MAK 
--------------- 

这里是型号。 ModelList.js：

Ext.define('CustomList.model.ModelList', { 
    extend: 'Ext.data.Model', 
    xtype:'modelList', 
    requires:['CustomList.model.Customers'], 
    config: { 
      fields:['work'], 
     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:[ '{work.assignment.alerts}<br>', 
       '<tpl for="work.assignment.customers">', 
       'firstName: {firstName}<br>', 
       '</tpl>' 
      ] 
// am able get the below values in list 
//    itemTpl:'{work.assignment.alerts}' 
//    itemTpl:'{work.assignment.pnr.locator}' 
//     itemTpl:'{work.agent.activeFlag}' 
//    itemTpl: '<b>{firstName} {lastName}  </b><br>'+'pnr: '+ '{locator} <br>' + 
//     'Alerts: '+'{alerts}' +'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' 

    } 
}); 

任何人都可以请帮助我。谢谢。

Answer 1

这是你之后？

download here

这是一个非常简单的模仿起来，但它应该帮助你，我觉得你的模型协会是令人困惑的事情。

列表：

Ext.define('MyApp.view.MyList', { 
    extend: 'Ext.dataview.List', 

    config: { 
     store: 'MyJsonStore', 
     itemTpl: [ 
      '<div><div><h1>{work.assignment.alerts}</h1></div><tpl for="work.assignment.customers"><div>First Name: {firstName}</div></tpl></div>' 
     ] 
    } 

}); 

店：

Ext.define('MyApp.store.MyJsonStore', { 
    extend: 'Ext.data.Store', 

    config: { 
     data: [ 
      { 
       work: { 
        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: [ 
          { 
           lastName: 'XYZ', 
           firstName: 'MNO' 
          }, 
          { 
           lastName: 'PQR', 
           firstName: 'STU ' 
          } 
         ] 
        } 
       } 
      }, 
      { 
       work: { 
        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: [ 
          { 
           lastName: 'ANY', 
           firstName: 'KLJ' 
          }, 
          { 
           lastName: 'CHE', 
           firstName: 'MAK' 
          } 
         ] 
        } 
       } 
      } 
     ], 
     storeId: 'MyJsonStore', 
     proxy: { 
      type: 'ajax', 
      reader: { 
       type: 'json' 
      } 
     }, 
     fields: [ 
      { 
       name: 'work' 
      } 
     ] 
    } 
}); 

如果你的配置工作像我有那么你就可以慢慢在你的模型和关联，添加，如，以及你的AJAX加载，一路测试，这应该有助于你发现问题所在。

另外，当您使用JSON数据时，您可能会考虑使用像Json Lint这样的工具，您发布的原始JSON blob难以阅读且格式不正确，所有这些都使开发更加困难。