容器中的NestedList没有显示任何带有sencha touch 2.2.1的东西

时间:2013-07-26 05:34:13

标签: sencha-touch containers

以下是我的模型,只是字段配置:

  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

有人能帮助我吗?

1 个答案:

答案 0 :(得分:0)

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