JSONP Store Not Loading Data

[cooperka]

I have a simple application that uses a JSONP store and a listview. I am trying to load data from http://listtest.webs.com/callback.json which looks like this:

callback({
    "performanceList": [
        {
            "Performance_ID": "3",
            "S_Date": "Sun, Aug 19, 2012",
            "S_Time": "11:10 AM",
            "V_Name": "Some name",
            "V_City": "Chicago",
            "V_State": "MI",
            "P_Name": "Performer1"
        },
        {
            "Performance_ID": "1",
            "S_Date": "Sat, Sep 22, 2012",
            "S_Time": "6:30 PM",
            "V_Name": "Another Name",
            "V_City": "Grand Rapids",
            "V_State": "MI",
            "P_Name": "Performer2"
        },
        {
            "Performance_ID": "2",
            "S_Date": "Tue, Oct 16, 2012",
            "S_Time": "8:00 PM",
            "V_Name": "Some venue",
            "V_City": "Grand Rapids",
            "V_State": "MI",
            "P_Name": "Performer2"
        }
    ]
});

My JSONP store is as follows:

Ext.define('MyApp.store.MyJsonPStore', {
    extend: 'Ext.data.Store',
    requires: [
        'MyApp.model.MyModel'
    ],


    config: {
        model: 'MyApp.model.MyModel',
        storeId: 'MyJsonPStore',
        proxy: {
            type: 'jsonp',
            url: 'http://listtest.webs.com/callback.json',
            callbackKey: 'callback',
            reader: {
                type: 'json',
                idProperty: 'Performance_ID',
                rootProperty: 'performanceList'
            }
        }
    }
});

I get the following error when trying to load data manually:

ReferenceError: Can't find variable: callback
Source Class: undefined Line 0

What could be wrong here?

[SchattenMann]

why are you loading JSON from a JS?

I may not be the best person to answer you but i believe that if you are loading something like function(xxx) inside a .js that will probably be treated as a js script...

have you tried placing your JSONP response inside a .JSON file?

also, unless you specify you callback function on your proxy config, Sencha will manage the callback function name like:

Ext.data.JsonP.callback1

that means you either set a static callback function or you'll need to read the POST/GET variable callback

for debug i would advise:

Ext.define('MyApp.store.MyJsonPStore', {     extend: 'Ext.data.Store',     requires: [         'MyApp.model.MyModel'     ],       config: {         model: 'MyApp.model.MyModel',         storeId: 'MyJsonPStore',         proxy: {             type: 'jsonp',             url: 'http://listtest.webs.com/callback2.js',
            callbackKey: 'callback',             reader: {                 type: 'json',                 idProperty: 'Performance_ID',                 rootProperty: 'performanceList'             }         }     } });

[cooperka]

I already tried adding a callbackKey, and nothing changes. The default is 'callback' so it should work even without it. I also tried renaming the file to callback.json as you suggested, but I am still having the same issue.

[SchattenMann]

ups my bad, you should set callbackName , not callbackKey

http://docs.sencha.com/touch/2-0/#!/...method-request

[cooperka]

That's still not working. After reading more documentation I've decided I should probably make it a php file that uses the callback parameter to dynamically name the function based on whatever Sencha decides - I'll let you know if that works.

Edit: Based on the documentation I changed the function name in callback.json to

Ext.data.JsonP.callback

and I get a slightly different error:

TypeError: 'undefined' is not a function
Source Class: undefined Line 0

I'm still gonna make it a php file.

[SchattenMann]

That would be my next comment.

wrap your json string with $_POST['callback']

although to be honest, assuming no errors or typos done, it would be exactly the same.

my advice would be to monitor the request using chrome console, check both sent headers and response.

[cooperka]

I used a PHP file instead, based on the source code from http://docs.sencha.com/ext-js/4-0/#!...ta.proxy.JsonP

It works perfectly. No special configs needed, just a default JsonP store with URL set to my new PHP file. For some reason nothing displays when I 'load data' manually, but it works in the browser and that's all that matters.