Sencha 嵌套列表不显示任何项目

Question

喂，

我正在尝试通过浏览 sencha 文档和互联网上提供的其他示例来开发嵌套列表演示。到目前为止，这是我所取得的成就：

Sencha 应用模型文件夹

文件名：item.js

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

Sencha App Store 文件夹

文件名：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
    }
 });

Sencha 应用视图文件夹

文件名：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] 找不到指定的Store。

2.[WARN][Anonymous] [Ext.Loader] 同步加载'Ext.dataview.NestedList'；考虑明确添加“Ext.dataview.NestedList”作为相应类的要求。

这是快照

可能出了什么问题？

1. 我知道嵌套列表带有标题栏，但如果我想将嵌套列表添加为项目怎么办。

2. 当我按照GitHub Demo of Nested List 复制并粘贴我的应用程序的 Main.js 中的内容并相应地注释掉其余代码时，该示例有效。但是这个例子和我的例子的一个主要区别是商店、模型和视图在一个 js 中，而在我的例子中，它们在单独的 js 和单独的文件夹中。

请指导/帮助我。

非常感谢。

Answer 1

首先将layout: 'fit' 属性添加到您的nestedList。

Main.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
                }]
            }]
        }
    }
});

问题是，您在商店中定义了一个嵌套列表，而不仅仅是商店，它应该添加到您的“主”视图中的列表中。那么store中的数据需要标签data而不是root

查看一个工作示例：http://www.senchafiddle.com/#ERFUC

编辑

在你的 app.js 中添加以下部分

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

您可以在上面的小提琴中找到整个 app.js。