Sencha touch nested list no data

Question

I am new for sencha touch. I using mvc method. Please see my code below

Main.js

Ext.define('test.view.Main', {
    extend: 'Ext.tab.Panel',
    xtype: 'main',
    requires: [
        'Ext.TitleBar',
        'Ext.Video',
        'Ext.dataview.NestedList'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
            {
                title: 'Welcome',
                iconCls: 'home',

                styleHtmlContent: true,
                scrollable: true,

                items: {
                    docked: 'top',
                    xtype: 'titlebar',
                    title: 'Welcome to Sencha Touch 2'
                },

                html: [
                    "You've just generated a new Sencha Touch 2 project. What you're looking at right now is the ",
                    "contents of <a target='_blank' href=\"app/view/Main.js\">app/view/Main.js</a> - edit that file ",
                    "and refresh to change what's rendered here."
                ].join("")
            },
            {




                title: 'Get Started',
                iconCls: 'action',

                items: [
                    {
                        docked: 'top',
                        xtype: 'titlebar',
                        title: 'Getting Started'
                    },
                    {
                        xtype: 'nestedlist',

                    }
                ]
            }
        ]
    }
});

Nestedlist.js

 Ext.define('bluebutton.view.NestedList', {
    extend: 'Ext.NestedList',
    xtype: 'nestedlist',
    requires: [
        'Ext.field.Select',
        'Ext.field.Search',

        'Ext.plugin.ListPaging',
        'Ext.plugin.PullRefresh',



    ],
    config: {

          store : { xclass : 'Test.store.data'},
        detailContainer: detailContainer,
        detailCard: true,



    },


});

Test.store.data

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

    config: {
        model: 'Test.model.data',
        defaultRootProperty: 'items',
        root: {
            items: [
            {
                text: 'Drinks',
                items: [
                    {
                        text: 'Water',
                        items: [
                            { text: 'Still', leaf: true },
                            { text: 'Sparkling', leaf: true }
                        ]
                    },
                    { text: 'Soda', leaf: true }
                ]
            },
            {
                text: 'Snacks',
                items: [
                    { text: 'Nuts', leaf: true },
                    { text: 'Pretzels', leaf: true },
                    { text: 'Wasabi Peas', leaf: true }
                ]
            }
        ]
        }
    }
});

model.js

    Ext.define('Test.model.data', {
    extend: 'Ext.data.Model',
    config: {
        fields: ['text']
    }



});

But nested list no able to get the data. I get empty list. Any solution?

Answer 1

If you are providing inline data in store shouldn't it be data attribute instead of root?

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

    config: {
        model: 'Test.model.data',
        defaultRootProperty: 'items',
        data: {
            items: [
            {
                text: 'Drinks',
                items: [
                    {
                        text: 'Water',
                        items: [
                            { text: 'Still', leaf: true },
                            { text: 'Sparkling', leaf: true }
                        ]
                    },
                    { text: 'Soda', leaf: true }
                ]
            },
            {
                text: 'Snacks',
                items: [
                    { text: 'Nuts', leaf: true },
                    { text: 'Pretzels', leaf: true },
                    { text: 'Wasabi Peas', leaf: true }
                ]
            }
        ]
        }
    }
});