5 Apr 2013 10:22 PM #1
GridPanel using JsonStore - data loads in Architect but not in browser
I used Architect to create an ExtJS 4.1.x project which includes a GridPanel using a JsonStore.
In Architect, the data loads into the JsonStore and displays in the GridPanel.
But in the browser, only the GridPanel's title and column names (sortable/draggable) display.
No rows of data display in the GridPanel when using the browser. (I tried Chrome and Firefox.)
I am testing this using a local browser on Windows7, written in Node.js, based on the (first) gist here:
The project is attached in a ZIP file.
The JSON URL used by the GridPanel's JsonStore is:
5 Apr 2013 10:38 PM #2
Screenshot in Sencha Architect
Here is a screenshot showing that the data does indeed load in Sencha Architect:
8 Apr 2013 1:22 AM #3
Just a quick stab at this - my guess is that this is a cross-domain problem. Data is loaded using Ext.Ajax and this is not possible between domains (you host your Sencha project on one domain but requests data from another domain). For this to work you must use JSONP or get your server to act as a proxy for the data from another domain, see for example http://stackoverflow.com/questions/5...main-json-call
This is not a limitation in Ext JS, simply a security measure in all browsers.
Hope this points you in the right direction.
8 Apr 2013 2:35 AM #4
I had a feeling it had something to do with a cross-domain problem, I will check this out.
8 Apr 2013 3:41 AM #5
It's still not working
Here is the site I'm trying to pull JSON from:
As you can see, the JSON being used is at "top-level", so there does not seem to be any need to set the 'root' property of the JsonReader. Meanwhile, I have set the 'autoload' property of the JsonPStore to 'true', and I have set the 'url' property of the JsonPProxy to 'http://bitcoincharts.com/t/markets.json'. And the JsonPStore has a model associated with it.
This is my first attempt to use Sencha Architect. I thought I would try this simple example to get started using Sencha Architect - just pull some data in with JSON and display it in a GridPanel. You can't get much simpler than that.
But I keep getting this error message when I attempt to do 'Load Data' on the JsonPStore in Sencha Architect:
Unable to load data using the supplied configuration.Open in Browser: http://bitcoincharts.com/t/markets.jsonIt is unfortunate that the documentation for Sencha Architect does not provide an example of how to do this simple task.
There is some documentation for doing this manually using in Sencha ExtJS (without Sencha Architect):
But the reason I purchased Sencha Architect is so that I could have a WYSIWIG drag-and-drop IDE to generate the correct code, so I could avoid making these kind of coding errors.
I am attaching a ZIP of my entire project in Sencha Architect (revised to use a JsonPStore) in case anyone can take a look at it in their copy of Sencha Architect and see what I am doing wrong.
8 Apr 2013 10:39 AM #6
I have a working copy of your project, just give me a sec to convert it to SA 2.2 version and I will post the details.
8 Apr 2013 10:53 AM #7
OK - no major modifications needed. I will stubbornly claim that the problem is in fact a cross-domain issue and to prove my point I have created a json-to-jsonp proxy that I will PM you the link for.
To show that it is working - in SA do the following:
1) Assign a Store to the Grid - select the Store you have in the project
2) In the JSONP proxy of the store, change the URL to the link for my proxy
3) Change the MyJsonReader to have a root property with the value "root"
4) Right-click the store and select Load Data
The code for the PHP proxy I wrote is (crude with lots of error-checking missing, but the point is that the server hosting your Ext JS application polls the data from the BC trading server and converts it to JSONP - actually normal JSON would have been OK as well).
As the BC trading server is not producing JSONP, the cross-domain issue is encountered.