Unable to load json (p) cross-domain domain using Sencha Touch

Question

I have time trying to load external json into Sencha Touch app. I can determine my data in the application or using an external json file and everything is fine. Then I transfer my json file to a remote server, change my proxy to type: "scripttag" to take care of jsonp problems, and then I have problems. When I look at the resources of my page, I see that the json DID file is loading, but it does not populate my list, as happens 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 downloaded from a remote host.

Loads a file but does not 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 } ] }; 

Something is probably embarrassing just what I am missing here, but I'm not sure what it is. Any help would be appreciated.

Answer 1

Changing the type of proxy to scripttag makes no sense. If you want to load the scripttag repository, you also need to implement a callback function. If you want to make cross-platform ajax calls with your existing json proxy, you can test it in a browser by disabling web security on chrome.

The problem between domains can be solved by running google chrome from the terminal using this command google-chrome --args --disable-web-security

For more information, refer to this link.

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

Hope this helps ...

Answer 2

Use jsonp type for proxy type in storage

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

And the server side implementation:

The remote server side must be configured to return data in this format. Here are suggestions on how you can 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