Question

嗨，

我正在尝试通过浏览sencha文档和其他可通过互联网获得的示例来开发嵌套列表演示。直到现在，这才是我所取得的成就：

Sencha App模型文件夹

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

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

以下是快照

Sencha View with no nested list

可能出现什么问题？

我知道嵌套列表带有标题栏，但如果我想将嵌套列表添加为项目该怎么办。
当我通过复制并粘贴我的应用程序的Main.js中的内容并相应地注释掉其余代码来跟踪GitHub Demo of Nested List时，该示例有效。但是示例和我的例子中的一个主要区别是Store，Model和View在一个js中，而在我的情况下，它们在单独的js和单独的文件夹中。

请指导我/帮助我。

Thanx很多。

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

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

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

修改

在app.js中添加以下部分

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

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

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

1 个答案: