Can't load json(p) cross-domain with Sencha Touch

Question

I'm having a heck of a time trying to load external json into a Sencha Touch app. I can define my data within the app, or with an external json file and all's fine. Then I move my json file to a remove server, change my proxy to type: 'scripttag' to take care of jsonp issues, and then I have issues. When I look at my page resources I see that the json file DID load, but it doesn't populate my list as it does with my local json file.

Using local json file (this works)

    var jsonStore = new Ext.data.Store({
        model: "Person",
        proxy: {
            type: 'ajax',
            url: 'http://dev.liftstudios.ca/data.json',
            reader: {
                type: 'json'
            }               
        },
        autoLoad: true
    });

    var jsonPanel = {
        title: "json",
        items: [
            {
                xtype: 'list',
                store: jsonStore,
                itemTpl:itemTemplate,
                singleSelect: true
            }
        ]           
    };

Using the same json file, loaded from a remote host.

This loads the file, but doesn't populate the list.

    var jsonStore = new Ext.data.Store({
        model: "Person",
        proxy: {
            type: 'scripttag',
            url: 'http://www.server.com/data.json',
            reader: {
                type: 'json'
            }               
        },
        autoLoad: true
    });

    var jsonPanel = {
        title: "json",
        items: [
            {
                xtype: 'list',
                store: jsonStore,
                itemTpl:itemTemplate,
                singleSelect: true
            }
        ]           
    };

There's probably something embarrassingly simple that I'm missing here, but I'm not sure what that something is. Any help will be greatly appreciated.

Answer 1

Changing the proxy type to scripttag does not make any sense . If you want to load a scripttag store, you have to implement a callback function as well. If you want do make cross platform ajax calls with the existing json proxy , you can test it on the browser by disabling the web security on chrome.

The cross-domain problem can be solved by starting google chrome from the terminal by this command google-chrome --args --disable-web-security

Check out this link for more information

http://www.senchatouchbits.com/7/cross-domain-ajax-requests.html

Hope it will help...

Answer 2

Use type jsonp for proxy type in the store

var jsonStore = new Ext.data.Store({
    model: "Person",
    proxy: {
        type: 'jsonp',
        url: 'http://www.server.com/data.json',
        reader: {
            type: 'json'
        }               
    },
    autoLoad: true
});

And Implementing on the server side:

The remote server side needs to be configured to return data in this format. Here are suggestions for how you might achieve this using Java, PHP and ASP.net:

Java:

boolean jsonP = false;
String cb = request.getParameter("callback");
if (cb != null) {
    jsonP = true;
    response.setContentType("text/javascript");
} else {
    response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (jsonP) {
    out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (jsonP) {
    out.write(");");
}

PHP:

$callback = $_REQUEST['callback'];

// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');

//start output
if ($callback) {
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
} else {
    header('Content-Type: application/x-json');
    echo json_encode($output);
}

ASP.net:

String jsonString = "{success: true}";
String cb = Request.Params.Get("callback");
String responseString = "";
if (!String.IsNullOrEmpty(cb)) {
    responseString = cb + "(" + jsonString + ")";
} else {
    responseString = jsonString;
}
Response.Write(responseString);

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.data.proxy.JsonP

Answer 3

var jsonStore = new Ext.data.Store({
    model: "Person",
    proxy: {
        type: 'jsonp',
        url: 'http://www.server.com/data.json',
        reader: {
            type: 'json'
        }               
    },
    autoLoad: true,
   crossDomain: true,
});

crossDomain: true,try this