将数据加载到Sencha列表中

时间:2014-09-22 11:27:56

标签: sencha-touch sencha-touch-2

我想将数据(数组)添加到sencha列表中。我只是无法绑定数据。不确定列表是否未刷新或数据是否未添加到列表中。

我的商店:

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

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

我的模特:

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

我的主视图:

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

我的控制器:

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

数据未绑定到列表中。我能够从数组中设置标签html但无法绑定列表。

任何帮助将不胜感激。

1 个答案:

答案 0 :(得分:1)

请参考此代码,它可能会对您有所帮助。 (我已在评论中解释过这一点)

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