Question

I’m building an app in Sencha Touch 2 using a PhoneGap wrapper.
I’m coding in MVC model, here is the link of the app in a webserver (for debuging): http://nqatalog.negroesquisso.pt/APP/ LOGIN: user: 1, password: 1

I have a nested list with a TreeStore to load its data, and .json file with the data.

Model

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

Store

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

View

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

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

Another view, calling the previous one

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

config: {

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


    listeners: { 
        painted: function () {


        }
    },
},

onleafitemtap: function() {}
});

This nested list renders empty (as you can see and debug if you want in the link above)

Thank you for your time.

*EDIT (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

I was just having this same issue and I took another look at the NestedList sample in the Sencha documentation. I noticed that all data and collections of data had the same keys (items/text). I tried adjusting my JSON response and found that it worked. Here is my code:

JSON FROM PHP

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

EDIT

It looks like your Model definition has the word “condig” instead of “config”. Also, it appears as if the NestedList requires the use of “items” for collections and “text” for descriptions.