빈 중첩 된 목록 표시

Question

새로 만든 센차 터치 2 응용 프로그램을 기반으로. 은 그 때 나는 내 중첩 된 목록을 추가 할 - JSON에서 읽어 내 가게 인라인 또는 내 가게 - - 계층 메뉴 트리 발견 중요하지 않습니다 아무것도 탭 '메뉴'안에 표시합니다. 무엇이 잘못 되었나요?

중요 파일/코드 조각 :

app.js에

MVC 섹션 :

// 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 상점이로드 어떤 시점에서

{ 
    "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 
       } 
      ] 
     } 
    ] 
} 

Answer 1

: menu.json (jsonlint.com에 의해 유효 통과 체크) -

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 : re.MenuTree.js? 귀하의 상점에서 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);