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難以閱讀且格式不正確，所有這些都使開發更加困難。