Sencha touch - 显示嵌套JSON数据的子元素

时间:2011-11-02 15:50:40

标签: json sencha-touch store nested-lists

我是Sencha touch的新手,需要您的帮助才能解决问题。我正在尝试使用以下JSON和Sencha触摸代码显示子文本列表。我仔细查看了API并发现可以访问子数据,但后来我不知道如何将其发送回Panel / Store以显示列表为

  • 21岁儿童
  • Child 22

我嵌套了JSON数据,如下所示:

    {
   "items":[
       {
         "id":"1",
         "text": "Parent 1",
         "leaf": false,
         "items": [
              {
                  "id":1,
                  "text": "child 1",
                  "leaf": true
              },
              {
                   "id":2,
                   "text": "child 2",
                   "leaf": true
              }
         ]
    },
    {
        "id":"2",
        "text": "Parent 2",
        "leaf": false,
        "items": [
            {
                "id":3,
                "text": "child 21",
                "leaf": true
            },
       {
                "id":4,
                "text": "Child 22",
                "leaf": true
            }
         ]
      }
    ]
  }

现在我的sencha触控代码如下:

  Ext.ns('MyApp');
  MyApp.Child= Ext.regModel(Child, {
    fields: ['id','text','day','date'],
    belongsTo: 'Parent',
    idProperty:'id',
    proxy: {
         type: 'rest',
         url: 'test.json'
    }
  });
  MyApp.Parent = Ext.regModel('Parent', {
    fields: [
      {name: 'id', type: 'int'},
      {name: 'text', type: 'string'}
     ] ,
      associations: [
            { type: 'hasMany', model: 'Child', name: 'items'}
      ],
      proxy: {
        type: 'ajax',
        url: 'test.json'
   }

  });
  MyApp.parentStore = new Ext.data.Store({
     model : 'Parent',
     proxy: {
        type: 'rest',
        url: 'test.json',
        reader: {
            type: 'json',
            root : 'items'
         }
      },

      autoLoad:true 
   });

   MyApp.parentStore.filter('id','2');

// Do something here to get the list of child items.

//   MyApp.childStore = ?   

   MyApp.appList = new Ext.Panel ({
        fullscreen  : true,
        dockedItems : [
             {
                  xtype : 'toolbar',
                  title : 'Applications',
                  dock : 'top'
             }
        ],
        items: [{
        xtype: 'list',
        store: MyApp.childStore, // ??????
        itemTpl: '<div class="contact"><strong>{text}</strong></div>'
    }]                     

 });

1 个答案:

答案 0 :(得分:2)