Sencha touch — отображение дочерних элементов вложенных данных JSON

#json #sencha-touch #store #nested-lists

#json #sencha-touch #Магазин #вложенные списки

Вопрос:

Я новичок в Sencha touch и нуждаюсь в вашей помощи для решения проблемы. Я пытаюсь отобразить список дочернего текста, используя следующий код JSON и Sencha touch. Я тщательно изучил API и обнаружил, что к дочерним данным можно получить доступ, но тогда я не уверен, как я могу отправить их обратно на панель / хранилище, чтобы отобразить список как

  • Дочерний элемент 21
  • Дочерний элемент 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:

Из того, что я понимаю, что вам нужно сделать, это NestedList Посмотрите на эти ссылки:

http://www.sencha.com/learn/intro-to-the-nested-list-component/

https://github.com/nelstrom/Sencha-Touch-nested-list-demo