sencha-touch - 容器中的 NestedList 在 sencha touch 2.2.1 中未显示任何内容

Question

下面是我的模型，只是字段的配置：

  Ext.define('Zjsy.model.TasksToDoModel', {
    extend : 'Ext.data.Model', 
    xtype : 'TasksToDoModel',
    config : {
        fields : ['text']
    }
    });

下面是我的商店，我首先创建数据并使其成为商店的内联数据，我将选择代理：

   var data = {
 text: 'Groceries',
 items: [{
     text: 'Drinks',
     items: [{
         text: 'Water',
         items: [{
             text: 'Sparkling',
             leaf: true
         }, {
             text: 'Still',
             leaf: true
         }]
     }, {
         text: 'Coffee',
         leaf: true
     }, {
         text: 'Espresso',
         leaf: true
     }, {
         text: 'Redbull',
         leaf: true
     }, {
         text: 'Coke',
         leaf: true
     }, {
         text: 'Diet Coke',
         leaf: true
     }]
 }, {
     text: 'Fruit',
     items: [{
         text: 'Bananas',
         leaf: true
     }, {
         text: 'Lemon',
         leaf: true
     }]
 }, {
     text: 'Snacks',
     items: [{
         text: 'Nuts',
         leaf: true
     }, {
         text: 'Pretzels',
         leaf: true
     }, {
         text: 'Wasabi Peas',
         leaf: true
     }]
 }]
};


  Ext.define('Zjsy.store.TasksToDoStore', {
    extend : 'Ext.data.Store', 
    xtype : 'TasksTodoStore',
    requires : ['Zjsy.model.TasksToDoModel'],
    config : {
        model : 'Zjsy.model.TasksToDoModel',
        data : data
    }
     });

以下是我的观点，我通过从容器扩展来创建它：

Ext.define('Zjsy.view.TasksToDoPanel',
{
    extend : 'Ext.Container',
    id : 'tasksToDoPanel',
    requires: [
               'Ext.dataview.*',
               'Zjsy.store.TasksToDoStore',
               'Ext.data.Store'
         ],
    config : {
        xtype : 'panel',
        layout : 'vbox',
        style : 'background:rgb(218,236,245)',
        items : [
            {
                    xtype:'Ext.dataview.NestedList',
                    store : 'Zjsy.store.TasksToDoStore',
                    displayField: 'text',
                    flex: 1,
                    style : 'border:1px solid red;'
                }//nested list
            ]
    }//config
});

当我在 chrome 日志中查找时，它说“ Uncaught Error: [Ext.createByAlias] Cannot create an instance of unrecognized alias: widget.Ext.dataview.NestedList sencha-touch-all-debug.js:6630”

有谁能够帮我 ？

Answer 1

Ext.dataview.NestedList不是类名xtype，所以将其更改为nestedlist

xtype从商店中删除并storeId : 'TasksTodoStore'在商店配置中提供

而你的 Json 是无效的

模型

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

店铺

var data =  {
     "text": "Groceries",
     "items": [{
         "text": "Drink",
         "items": [{
             "text": "Water",
             "items": [{
                 "text": "Sparkling",
                 "leaf": "true"
             }, {
                 "text": "Still",
                 "leaf": true
             }]
         }, {
             "text": "Coffee",
             "leaf": true
         }, {
             "text": "Espresso",
             "leaf": true
         }, {
             "text": "Redbull",
             "leaf": true
         }, {
             "text": "Coke",
             "leaf": true
         }, {
             "text": "Diet Coke",
             "leaf": true
         }]
     }, {
         "text": "Fruit",
         "items": [{
             "text": "Bananas",
             "leaf": true
         }, {
             "text": "Lemon",
             "leaf": true
         }]
     }, {
         "text": "Snacks",
         "items": [{
             "text": "Nuts",
             "leaf": true
         }, {
             "text": "Pretzels",
             "leaf": true
         }, {
             "text": "Wasabi Peas",
             "leaf": true
         }]
     }]
    };

Ext.define('SF.store.TasksToDoStore', {
    extend : 'Ext.data.TreeStore',
    config : {
        model : 'SF.model.TasksToDoModel',
        storeId : 'tasksToDoStore',
        defaultRootProperty: 'items',
        root : data,
        autoLoad : false
    }
});

看法

Ext.define('SF.view.TasksToDoPanel',{
    extend : 'Ext.Container',
    id : 'tasksToDoPanel',
    xtype : 'tasksToDoPanel',
    requires: [
               'SF.store.TasksToDoStore'
         ],
    config : {
        layout : 'fit',
        items : [
            {
                    xtype:'nestedlist',
                    store : 'tasksToDoStore',
                    title: 'Groceries',
                    displayField: 'text'
             }]
    }
});