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

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