Load Data into Sencha List - sencha-touch

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