Question

我正在使用PhoneGap包装器在Sencha Touch 2中构建应用程序。我在MVC模型中编码，这是应用程序在网络服务器中的链接（用于debuging）：http://nqatalog.negroesquisso.pt/APP/登录：用户：1，密码：1

我有一个嵌套列表，其中一个TreeStore用于加载其数据，而.json文件包含数据。

模型

Ext.define('APP.model.menuitem',{
                extend: 'Ext.data.Model',
                condig: {
                    fields: ['id', 'name', 'description', 'items']
                }
            });

存储

Ext.define('APP.store.nestedmenu', {
extend: 'Ext.data.TreeStore',

config: {
    model: 'APP.model.menuitem',

    autoLoad: true,

    proxy: {
        type: 'ajax',
        url: 'data/menu.json',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
}
});

查看

Ext.define('APP.view.MenuNestedList', {
extend: 'Ext.dataview.NestedList',
xtype: 'menunestedlist',
id: 'debug',

config: {
    store: 'nestedmenu'
},
});

另一种观点，称之为前一种观点

Ext.define("APP.view.Leftmenu", {
extend: 'Ext.Panel',
xtype: 'leftmenu',

config: {

    items: [
        {
            xtype: 'menunestedlist'
        }
    ],


    listeners: { 
        painted: function () {


        }
    },
},

onleafitemtap: function() {}
});

此嵌套列表呈现为空（如上所示，您可以查看和调试）

感谢您的时间。

*编辑（data / menu.json）

{
"items": [
    {
        "id": 1,
        "name": "Section #1",
        "description": "Lorem ipsum dolor sit",

        "items": [
            {
                "id": 8,
                "name": "Product #1",
                "description": "Lorem ipsum dolor sit",
                "leaf": true
            },
            {
                "id": 9,
                "name": "Product #2",
                "description": "Lorem ipsum dolor sit",
                "leaf": true
            }
        ]
    },        
    {
        "id": 2,
        "name": "Section #2",
        "description": "Lorem ipsum dolor sit",

        "items": [
            {
                "id": 3,
                "name": "Section #3",
                "description": "Lorem ipsum dolor sit",

                "items": [
                    {
                        "id": 10,
                        "name": "Product #3",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    },
                    {
                        "id": 11,
                        "name": "Product #4",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    }
                ]
            },
            {
                "id": 4,
                "name": "Section #4",
                "description": "Lorem ipsum dolor sit",

                "items": [
                    {
                        "id": 12,
                        "name": "Product #5",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    },
                    {
                        "id": 13,
                        "name": "Product #6",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    }
                ]
            },
            {
                "id": 5,
                "name": "Section #5",
                "description": "Lorem ipsum dolor sit",

                "items": [
                    {
                        "id": 14,
                        "name": "Product #7",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    }
                ]
            },
            {
                "id": 6,
                "name": "Section #6",
                "description": "Lorem ipsum dolor sit",

                "items": [
                    {
                        "id": 15,
                        "name": "Product #8",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    },
                    {
                        "id": 16,
                        "name": "Product #9",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    },
                    {
                        "id": 17,
                        "name": "Product #10",
                        "description": "Lorem ipsum dolor sit",
                        "leaf": true
                    }
                ]
            }
        ]             
    },
    {
        "id": 7,
        "name": "Section #7",
        "description": "Lorem ipsum dolor sit",

        "items": [
            {
                "id": 18,
                "name": "Product #11",
                "description": "Lorem ipsum dolor sit",
                "leaf": true
            },
            {
                "id": 19,
                "name": "Product #12",
                "description": "Lorem ipsum dolor sit",
                "leaf": true
            },
            {
                "id": 20,
                "name": "Product #13",
                "description": "Lorem ipsum dolor sit",
                "leaf": true
            }
        ]
    }
]       
}

Answer 1

我刚刚遇到同样的问题，我又看了一下Sencha文档中的NestedList sample。我注意到所有数据和数据集合都具有相同的键（项目/文本）。我尝试调整我的JSON响应，发现它有效。这是我的代码：

来自PHP的JSON

{
    "items":
    [{
            "text":"Other",
            "items":
            [{
                    "text":"Employee IDs",
                    "leaf":"true"
            }]
    }]
}

<强> JAVASCRIPT

Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['text']
    }
});

var treeStore = Ext.create('Ext.data.TreeStore', {
    model: 'ListItem',
    defaultRootProperty: 'items',
    proxy: {
        type: 'ajax',
        url: 'data/get_sections.php',
        reader: {
            type: 'json',
            rootProperty: 'items'
        }
    }
});

修改

看起来你的模型定义有“condig”而不是“config”。此外，似乎NestedList需要使用集合的“items”和描述的“text”。

Answer 2

我花了很多时间处理同样的问题，直到我意识到我忘记在app.js中的应用程序的stores数组中列出我的新商店（例如，nestedmenu）。

NestedList不会呈现

2 个答案: