Load Data into Sencha List

Question

I want to add the data(array) to a sencha list. I just can't bind the data. Not sure whether list is not refreshed or data is not added to the list.

My Store:

Ext.define("ListDemoApp.store.ListDemoStore", {
    extend: "Ext.data.Store",

    config: {
        storeId: 'listdemostore',
        model: "ListDemoApp.model.ListDemoModel"
    }
});

My Model:

Ext.define("ListDemoApp.model.ListDemoModel", {
    extend: "Ext.data.Model",
    config: {
        fields: ["name"]
    }
});

My MainView:

Ext.define('ListDemoApp.view.Main', {
    extend: 'Ext.Panel',
    xtype: 'main',
    id:'vwmain',
    requires: [
        'Ext.TitleBar',
        'Ext.Video'
    ],
    config: {
        tabBarPosition: 'bottom',

        items: [
           {
               xtype: 'button',
               id: 'listdemobtn',
               text:'Load Data'
           }
        ]
    }
});

MyListView:

Ext.define("ListDemoApp.view.DemoListView", {
    extend: 'Ext.Panel',
    xtype: 'demolistview',
    id: 'vwdemolist',
    requires: [
        'Ext.dataview.List',
        'Ext.XTemplate',
        'ListDemoApp.store.ListDemoStore'
    ],
    config: {
        items: [
            {
                xtype: 'label',
                html: 'testing...',
                id: 'lblsml'
            },
            {
                xtype: 'list',
                id: 'namelist',
                itemTpl: "{name}"
            }
        ]
    }
});

And My controller:

Ext.define("ListDemoApp.controller.ListDemoController",
    {
        extend: "Ext.app.Controller",
        config: {
            refs: {
                'mainvw': '#vwMain',
                'demoList': '#vwdemolist'
            },
            control: {
                '#listdemobtn':
                    {
                        tap: 'store'
                    }
            }
        },
        store: function () {
            //var dataresult;
            var group_store = Ext.getStore("listdemostore");
            var demodata = [{ "name": "AAA" }, { "name": "BBB" }, { "name": "CCC" }]
            if (this.getDemoList() == undefined) {
                Ext.Viewport.setActiveItem({ xtype: "demolistview", id: "vwdemolist" });
            }
            else {
                Ext.Viewport.setActiveItem(this.getDemoList());
            }

            var lst = Ext.getCmp('namelist');
            var lbl = Ext.getCmp('lblsml');
            lbl.setHtml(demodata[0]['name']);
            //lst.setStore(null);
            //lst.setData(demodata);
            group_store.add(demodata);
            //group_store.load();
            lst.setStore(group_store);
            //lst.refresh();
            //// lst.setData(demodata);
        }
    });

The data is not binded to the list. I was able to set the label html from array but not able to bind the list.

Any help will be appreciated.

Answer 1

please refer this code, it might help you. (I have already explained this in the comment)

Ext.define("ListDemoApp.view.DemoListView", {
    extend: 'Ext.Panel',
    xtype: 'demolistview',
    id: 'vwdemolist',
    requires: [
        'Ext.dataview.List',
        'Ext.XTemplate',
        'ListDemoApp.store.ListDemoStore'
    ],
    config: {
        layout:'fit'
        items: [
            {
                xtype: 'label',
                html: 'testing...',
                id: 'lblsml'
            },
            {
                xtype: 'list',
                id: 'namelist',
                itemTpl: '{name}',
                store:'ListDemoStore'
            }
        ]
    }
});