Сенч Список Уплотненный не отображают элементов

Question

Ahoy,

Я пытаюсь разработать вложенный список демы, пройдя через Сенч документы и другие, например, доступные через Интернет. До сих пор это то, что я достиг:

Сенча App Модель Папка

Имя файла: item.js

Ext.define('firstApp.model.item', { 
    extend: 'Ext.data.Model', 
     config: { 
      fields: [{ 
       name: 'text', 
       type: 'string' 
      }] 
     } 
}); 

Сенча App Store Folder

Имя файла: nList.js (элементы перечислены в документах sencha)

var treeStore = Ext.create('Ext.data.TreeStore', { 
model: 'item', 
defaultRootProperty: 'items', 
root: { 
    items: [ 
     { 
      text: 'Heavy Metal', 
      items: [ 
       { 
        text: 'NWOBHM', 
        items: [ 
         { text: 'Iron Maiden', leaf: true }, 
         ] 
       }, 
       { text: 'MetalCore', leaf: true } 
      ] 
     }, 
     { 
      text: 'Extreme Metal', 
      items: [ 
       { text: 'Children Of Bodom', leaf: true }, 
       { text: 'Cannibal Corpse', leaf: true }, 
       { text: 'Cradle Of Filth', leaf: true } 
      ] 
     } 
    ] 
} 
}); 


Ext.create('firstApp.store.nList',{ 
    extend:'Ext.NestedList', 
    requires: {'Ext.dataview.NestedList'}, 
    config:{ 
    fullscreen: false, 
    store: treeStore 
    } 
}); 

Сенча App Представления папки

Имя файла: Main.js

Ext.define('firstApp.view.Main', { 
extend: 'Ext.Container', 
xtype: 'main', 
requires: [ 
    'Ext.TitleBar', 
    'Ext.Button', 
    //'firstApp.model.item', 
    // 'firstApp.store.nList', 
    //'Ext.dataview.NestedList', 
    //'Ext.data.TreeStore' 
    //'Ext.ToolBar' 
] , 
config: { 
//store: 'firstApp.store.Main', 
    items: [ 

      { 

      xtype: "toolbar", 
      docked: "top", 
      title: "List View", 
      items: [ 
        { 
         xtype: "spacer" 
        }, 
        { 
         xtype: "button", 
         text: "Tab View", 
         ui: "action", 
         handler: function(){      
           Ext.Viewport.animateActiveItem((
              Ext.create('firstApp.view.view2')), 
              {type: 'slide', direction:'left'}).show(); 
          }       
        } 
        ] 
      }, 
      { 
       xtype: 'nestedlist', 
       displayField: 'text', 
       model: 'item', 
       store: 'nList' 
       } 


      ] 

      } 




}); 

console.log

Эти предупреждения я получаю

1. [WARN] [Ext.dataview.NestedList # applyStore] Указанный магазин не найден.

2. [WARN] [Anonymous] [Ext.Loader] Синхронная загрузка 'Ext.dataview.NestedList'; рассмотрите возможность добавления «Ext.dataview.NestedList» явно как требование соответствующего класса.

Вот снимок

Что может быть неправильно?

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

2. Когда я следил за GitHub Demo of Nested List, копируя и вставляя содержимое в Main.js моего приложения и комментируя остальную часть кода соответственно, этот пример работал. Но существенное различие в примере и моем примере заключается в том, что Store, Model и View находятся в одном js, тогда как в моем случае они находятся в отдельных js и в отдельной папке.

Просьба, посоветуйте мне/помогите мне.

Thanx много.

Answer 1

Сначала добавьте свойство layout: 'fit' к вашему вложенному списку.

Главная.JS

Ext.define('firstApp.view.Main', { 
    extend : 'Ext.Container', 
    xtype : 'main', 
    config : { 
     fullscreen : true, 
     layout : 'fit', 
     items : [{ 
      xtype : "toolbar", 
... 

Затем измените ваш магазин на следующий: nList.js

Ext.define('firstApp.store.nList', { 
    extend : 'Ext.data.TreeStore', 
    config : { 
     model : 'firstApp.model.Item', 
     defaultRootProperty : 'items', 
     data : { 
      items : [{ 
       text : 'Heavy Metal', 
       items : [{ 
        text : 'NWOBHM', 
        items : [{ 
         text : 'Iron Maiden', 
         leaf : true 
        }] 
       }, { 
        text : 'MetalCore', 
        leaf : true 
       }] 
      }, { 
       text : 'Extreme Metal', 
       items : [{ 
        text : 'Children Of Bodom', 
        leaf : true 
       }, { 
        text : 'Cannibal Corpse', 
        leaf : true 
       }, { 
        text : 'Cradle Of Filth', 
        leaf : true 
       }] 
      }] 
     } 
    } 
}); 

Проблема была, что вы определили вложенный список в вашем магазине, а не только магазин, который следует добавить в список в главном окне. Затем данные в хранилище нужен тег data не root

См рабочий пример: http://www.senchafiddle.com/#ERFUC

EDIT

Добавьте следующие детали в ваших app.js

Ext.application({ 
    name: 'firstApp', 
    views:['Main'], 
    stores:['nList'], 
    models:['Item'], 

Вы может найти все app.js в скрипке выше.