Question

I am trying to use extjs store to talk to a Jersey rest Java application (running at tomcat) that returns a Json.
And I am trying to use Json to print to a grid component.
This is my store code.

Ext.define('WSC.store.Users', {
extend: 'Ext.data.Store',
fields: ['period','tot_units', 'tot_selling_price'],
model: 'WSC.model.User',
proxy: {
    type: 'rest',
    url : 'http://localhost:8080/mondrianCube/services/query/querygoeshere/json',
    reader: {
        type: 'json',
        root: 'table'
    }
},
autoLoad: true

});

The store was not able to read the json obtained. Most of the recommendations were to add response headers(Access-Control-Allow-Origin) to the webapp(running at tomcat).
So I added the response headers like below.

@Path("/query/{qryParam}/json")
@GET
@Produces(MediaType.APPLICATION_JSON)
public static Response jsonResult(@PathParam("qryParam") String qryParam) throws JSONException 
{
    executeQuery("select {[Measures].members} on columns, {Time.[2010], Time.[2010]} on rows from sales" );
    String json = (new JSONObject(((new ResultSetConvert(result)).toJson()))).toString();
    return Response.ok(json).header("Access-Control-Allow-Origin","*").build();     
}

Even then I get the same error as below

What am I missing here?

P.S If the url points to a file in the same domain, the store is able to read the json in the file.

Answer 1

I believe you’ll want to use JSONP for this, for example,

            Ext.get('search-form').on('submit', function(ev) {
                ev.preventDefault();
                Ext.ux.JSONP.request('http://api.flickr.com/services/feeds/photos_public.gne', {
                    callbackKey: 'jsoncallback',
                    params: {
                        format: 'json',
                        tags: Ext.fly('search-value').dom.value,
                        tagmode: 'all',
                        lang: 'en-us'                            
                    },
                    callback: updateResults
                });
                return false;
            });

jsonp by wikipedia definition

JSONP or “JSON with padding” is a complement to the base JSON data format. It provides a method to request data from a server in a different domain, something prohibited by typical web browsers because of the same origin policy.

Same origin policy by definition

In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. The policy permits scripts running on pages originating from the same site to access each other’s methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites.[