2013-04-16 3 views
0

Основано на недавно созданном приложении Sencha Touch 2, как его узнали here. Тогда я хотел бы добавить свой иерархический дерево вложенного списка - иерархическое дерево меню и нашел, что это не имеет значения - мой встроенный магазин или мой магазин, прочитанный из json, ничего не отображается внутри вкладки «Меню». Что случилось?Пустой дисплей вложенных списков

Важные файлы/фрагменты кода:

MVC раздел в app.js:

// MVC 
    views: [ 
     'Main' 
    ], 
    models: [ 
     'MenuItem' 
    ], 
    stores: [ 
     'MenuTree' 
    ], 

view.Main.js:

Ext.define('MobilePost.view.Main', { 
    extend: 'Ext.tab.Panel', 
    xtype: 'main', 
    requires: [ 
     'Ext.TitleBar', 
     'Ext.data.TreeStore', 
     'Ext.dataview.NestedList', 
     'Ext.data.proxy.JsonP', 
     'MobilePost.store.MenuTree' 
    ], 

    config: { 
     tabBarPosition: 'bottom', 

     items: [ 
      { 
          // From tutorial, working 
       title: 'Home', 
       iconCls: 'home', 
       cls: 'home', 
       html: [ 
        '<img src="http://staging.sencha.com/img/sencha.png" />', 
        '<h1>Welcome to Sencha Touch</h1>' 
       ].join("") 
      }, 
      { 
          // From tutorial, working 
       xtype: 'nestedlist', 
       title: 'Blog', 
       iconCls: 'star', 
       displayField: 'title', 

       store: { 
        type: 'tree', 

        fields: [ 
         'title', 'link', 'author', 'contentSnippet', 'content', 
         { name: 'leaf', defaultValue: true } 
        ], 

        root: { 
         leaf: false 
        }, 

        proxy: { 
         type: 'jsonp', 
         url: 'https://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://feeds.feedburner.com/SenchaBlog', 
         reader: { 
          type: 'json', 
          rootProperty: 'responseData.feed.entries' 
         } 
        } 
       }, 

       detailCard: { 
        xtype: 'panel', 
        scrollable: true, 
        styleHtmlContent: true 
       }, 

       listeners: { 
        itemtap: function(nestedList, list, index, element, post) { 
         this.getDetailCard().setHtml(post.get('content')); 
        } 
       } 
      }, 
      { 
          // Mine, not working 
       xtype: 'nestedlist', 
       title: 'Menu', 
       iconCls: 'settings', 
       store: 'MenuTree' 
      } 
     ] 
    } 
}); 

Модель - model.MenuItem.js:

Ext.define('MobilePost.model.MenuItem', { 
    extend: 'Ext.data.Model', 
    config: { 
     fields: [ 
      'id', // Menu item id for events 
      'text', // Menu item text 
      { name: 'leaf', defaultValue: false } 
     ] 
    } 
}); 

Магазин - sto re.MenuTree.js:

Ext.define('MobilePost.store.MenuTree', { 
    extend: 'Ext.data.TreeStore', 

    requires: [ 'MobilePost.model.MenuItem' ], 

    type: 'tree', 
    defaultRootProperty: 'items', 
    config: { 
     model: 'MobilePost.model.MenuItem', 
     /* 
     // TODO: inline store - uncomment to use 
     root: { 
      items: [ 
       { 
        id: 'settings', 
        text: 'Settings', 
        items: [ 
         { 
          id: 'shift', 
          text: 'Working shift', 
          leaf: true 
         }, 
         { 
          id: 'users', 
          text: 'Users', 
          leaf: true 
         }, 
         { 
          id: 'cash', 
          text: 'Cash', 
          leaf: true 
         } 
        ] 
       } 
      ] 
     }*/ 
     // TODO: JSON store - comment for inline store 
     proxy: { 
      type: 'ajax', 
      url: 'menu.json' 
     } 
    }, 
    // TODO: JSON store - comment for inline store 
    root: {} 
}); 

JSON - menu.json (действительно, прошла проверка jsonlint.com):

{ 
    "items": [ 
     { 
      "id": "settings", 
      "text": "Settings", 
      "items": [ 
       { 
        "id": "shift", 
        "text": "Working shift", 
        "leaf": true 
       }, 
       { 
        "id": "users", 
        "text": "Operators", 
        "leaf": true 
       }, 
       { 
        "id": "cash", 
        "text": "Cash", 
        "leaf": true 
       } 
      ] 
     } 
    ] 
} 

ответ

0

В какой момент ваш магазин загружается? Разве вы не должны использовать autoLoad:true в своем магазине?

также, если вы не хотите, чтобы создать и загрузить свой магазин с применением нагрузки необходимо вручную создать магазин по мере необходимости и установить его в список

var treeStore = Ext.create('MobilePost.store.MenuTree'); 
treeStore.load(); 

и использовать это в качестве атрибута магазина с вашей точки зрения

 { 
      // Mine, not working 
      xtype: 'nestedlist', 
      title: 'Menu', 
      id: 'myListId', 
      iconCls: 'settings', 
      store: treeStore 
     } 

ИЛИ установить магазин, если вид уже создан

Ext.getCmp('myListId').setStore(treeStore); 
+0

Сенча Architect 2 помогает м e, чтобы понять, в чем были проблемы: 1. autoLoad: true для хранения. 2. storeId декларация для магазина требуется. 3. поле магазина в вложенном списке должно указывать точно на ранее объявленный storeId. Вот и все. Большое спасибо за хорошую помощь –

Смежные вопросы