Sencha Touch JSONP Store Data not showing up in Panel

Question

I've got my sencha-touch app wired up as I believe it should be, and when I load it into Chrome, the Javascript console doesn't throw any errors. The WebService is finally returning the appropriate data, yet for some reason I can't for the life of me figure out why the panel is blank.

Here's the APP URL
http://rpcm.infinitas.ws/

Here's the WebService URL
http://rpc.infinitas.ws/Vimeo/Read?_dc=1308083451839&limit=25&callback=stcCallback1001

And here is some relevant code.

CONTROLLER

rpc.controllers.VimeoController = new Ext.Panel(
    rpc.views.Vimeo.index
);

VIEW

rpc.views.Vimeo.index = {
    id: 'VideoView',
    title: 'Videos',
    tpl: rpc.templates.VimeoTemplate,
    iconCls: 'tv',
    dockedItems: [{ xtype: 'toolbar', title: 'Videos'}],
    store: 'rpc.stores.VimeoStore'
};

STORE

rpc.stores.VimeoStore = new Ext.data.Store({
    id: 'VimeoStore',
    model: 'rpc.models.VimeoModel',
    proxy: {
        type: 'scripttag',
        url: WebService('Vimeo', 'Read'),
        method: 'GET',
        reader: {
            type: 'json',
            root: 'results'
        }
    },
    autoLoad: true
});

MODEL

rpc.models.VimeoModel = Ext.regModel('rpc.models.VimeoModel', {
    fields: [
        {name: 'id', type: 'int'},
        {name: 'title', type: 'string'}
    ]
});

TEMPLATE

rpc.templates.VimeoTemplate = new Ext.XTemplate([
    '<tpl for=".">',
        '<div>',
            '{title}',
        '</div>',
    '</tpl>'
]);

JSON RESPONSE

stcCallback1001({"results":[{"id":25036464,"title":"Power of A Surrendered Life: The Farewell Sermon"},{"id":25036610,"title":"Child Dedication June 2011"},{"id":24734142,"title":"Power of A Surrendered Life: Connection"},{"id":24884833,"title":"Finance Update June 2011"},{"id":24587711,"title":"Papua, Indonesia Sharing May 2011"},{"id":24232427,"title":"ICHTHUS: Coming King"},{"id":23868560,"title":"ICHTHUS: Healer"},{"id":23486615,"title":"ICHTHUS: Sanctifier"},{"id":23211649,"title":"ICHTHUS: Saviour"},{"id":23867961,"title":"Elder Announcement re: Brent Trask"},{"id":22998163,"title":"Triumph of Grace: Risen Lord"},{"id":23687914,"title":"Triumph of Grace: Reigning King"},{"id":23692076,"title":"KINGDOM now: For Thine Is The Kingdom"},{"id":23694183,"title":"KINGDOM now: Deliver Us From Evil"}],"success":true});

Any help or direction will be greatly appreciated.

did it render the toolbar? And the id of your store and the panel's id property don't match which might cause a problem — Jason Freitas

justis justis · Accepted Answer · 2011-06-15T04:34:18

The example response you provided looks like JSONP instead of plain JSON. You probably want an Ext.data.proxy.JsonP.

To use this, you could change your store to look like this:

rpc.stores.VimeoStore = new Ext.data.Store({
    id: 'VimeoStore',
    model: 'rpc.models.VimeoModel',
    proxy: {
        type: 'jsonp',
        url: WebService('Vimeo', 'Read'),
        reader: {
            type: 'json',
            root: 'results'
        }
    },
    autoLoad: true
});

Best of luck to you!

Sencha Touch JSONP Store Data not showing up in Panel

2 Answers