sencha touch - list display

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.

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.