sencha touch - list display - sencha-touch

Question

I am trying to pull few records from the Database and show it as a list on one of the panels(or screen). But I cant see anything on the screen. Please help me where I'm wrong.
The server returns a JSON response
{"success":true,"savedDeals":[
{"dealId":"17","dealName":"$2 Off Any Sandwich","dealText":"Valid with the purchase of any drink on Tuesday through Thursday from 11am to 4pm. Cannot be combined with other offers.","dealCategory":"Restaurant","dealCount":"0","dealRemaining":99999},
{"dealId":"21","dealName":"$10 OFF Kid's Clothing & Gifts","dealText":"Spend $50 and receive $10 off your total purchase","dealCategory":"Baby\/Kids","dealCount":"3","dealRemaining":3}
]}
The Model looks like :
myapp.models.SavedDeals = Ext.regModel("myapp.models.savedDeals", {
fields: [
{name : "dealId", type: "int"},
{name : "dealName", type : "string"},
{name : "dealText", type : "string"},
{name : "dealImg", type : "string"},
{name : "dealCategory", type : "string"},
{name : "dealCount", type : "int"},
{name : "dealRemaining", type : "int"},
]
});
The store Looks like
myapp.stores.SSavedDeals = new Ext.data.Store({
model: 'myapp.models.savedDeals',
autoload: true,
id : 'savedDealsStore',
proxy: {
type: 'ajax',
url: '/myappfiles/savedDeals.php',
params: {
UserID: '62'
},
reader: {
type: 'json',
root: 'savedDeals',
}
},
});
and the view looks like
myapp.views.DealraiserSavedDeals = Ext.extend(Ext.Panel,{
fullscreen : true,
standardSubmit : false,
dockedItems: [{
xtype: 'toolbar',
title: 'Deals List',
dock: 'top',
items: [{
xtype: 'button',
text: 'Home',
ui: 'Home',
handler: function(){
myapp.views.viewport.setActiveItem(myapp.views.dealraiserHome , 'slide');
}
}]
},
],
items: [{
xtype: 'list',
id : 'savedList',
emptyText : 'No data available.',
store: myapp.stores.SSavedDeals,
itemTpl: '{dealName}'
}]
initComponent: function() {
myapp.stores.SSavedDeals.load();
myapp.views.DealraiserHome.superclass.initComponent.apply(this, arguments);
}
});
Please help, what should I do to fix this issue.
Thanks.

Answer 1

I think the culprit is the fact your are calling a different class' superclass' initComponent method, if that makes sense!
initComponent: function() {
myapp.stores.SSavedDeals.load();
myapp.views.**DealraiserSavedDeals**.superclass.initComponent.apply(this, arguments);
}
You are also missing a comma after the 'items' array just before the initComponent definition.
After making those changes the list was showing up for me on a local copy - the only difference being I loaded the data in as an array rather than from your PHP file.