1. #1
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default Answered: JSONP Store Not Loading Data

    Answered: JSONP Store Not Loading Data


    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:
    Code:
    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:
    Code:
    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:
    Code:
    ReferenceError: Can't find variable: callback
    Source Class: undefined Line 0
    What could be wrong here?
    Last edited by cooperka; 13 Aug 2012 at 5:54 AM. Reason: Updated code

  2. 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.

  3. #2
    Sencha User
    Join Date
    Mar 2009
    Posts
    227
    Answers
    1
    Vote Rating
    0
    SchattenMann is an unknown quantity at this point

      0  

    Default


    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:

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

  4. #3
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    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.

  5. #4
    Sencha User
    Join Date
    Mar 2009
    Posts
    227
    Answers
    1
    Vote Rating
    0
    SchattenMann is an unknown quantity at this point

      1  

    Default


    ups my bad, you should set callbackName , not callbackKey

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

  6. #5
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    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.

  7. #6
    Sencha User
    Join Date
    Mar 2009
    Posts
    227
    Answers
    1
    Vote Rating
    0
    SchattenMann is an unknown quantity at this point

      0  

    Default


    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.

  8. #7
    Sencha User
    Join Date
    Jun 2012
    Posts
    45
    Answers
    2
    Vote Rating
    0
    cooperka is on a distinguished road

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread