Using Jsonp in proxy in model in extjs 4.2.1

2
votes

I am calling rest web service from sencha extjs 4.2.1 in model .My model is

Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: [
    {name: 'subCategoryName',  type: 'string'},
    ],
    proxy:{
    type : 'jsonp',
    callbackKey: 'callback',

            url: 'http://192.168.1.10:8080/CredoCustomerConnect/subcategory/getsubcategorylist/1/1/0',
         headers: {
             'Accept': 'application/json'
         },
          callback: function( data ) {             
             console.log("callback" + data);        
    },
    listeners: {
               load: function() {   
                   console.log("in load");
                }
                   },

       reader: {
           type: 'json',
           rootProperty:'subcategory'
           }
        }

});

When I call the url 'http://192.168.1.10:8080/CredoCustomerConnect/subcategory/getsubcategorylist/1/1/0',

in the browser , I am getting the result like

callback({"listException":"false","listSize":"5","nextPage":"false","pageNumber":"0","subcategory":[{"isException":"false","categoryId":"1","categoryName":"Solutions","productSize":"4","subCategoryDescription":"Oracle Consulting","subCategoryId":"1","subCategoryName":"Oracle Consulting"},],"totalRecords":"5"})

But I am not seeing any data in grid view.

Rest Web service method is 

@GET
     @Path("getsubcategorylist/{categoryId}/{userId}/{pageNumber}")
     @Consumes("application/x-www-form-urlencoded")
     //@Produces({MediaType.APPLICATION_JSON})
     @Produces({"application/javascript"})
     public JSONWithPadding   getSubCategorylist(@PathParam("categoryId") int categoryId,@PathParam("userId")int userId,@PathParam("pageNumber") int pageNumber, @QueryParam("callback") String callback)
     {

         SubCategoryList subCategory = new SubCategoryList();
         SubCategoryEntityHandler handler = new SubCategoryEntityHandler();
         try {
             subCategory =  handler.getSubCategoriesList(categoryId,pageNumber);

             return new JSONWithPadding(
                        new GenericEntity<SubCategoryList>(subCategory) {
                        },callback);

        } catch (Exception e) {
            e.printStackTrace();
            subCategory.setListException(true);
            subCategory.setListMessage(e.getMessage());
                        return new JSONWithPadding(
                    new GenericEntity<SubCategoryList>(subCategory) {
                    }, "callback");
        }    
     }

My store is 

 Ext.define('AM.store.Users', {
        extend: 'Ext.data.Store',

        config: {
        model: 'AM.model.User',


        }
    });

My view is 

Ext.define('AM.view.user.List' ,{
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',

    title: 'All Users',
    store: 'Users',

    initComponent: function() {


        this.columns = [
            {header: 'Subject',  dataIndex: 'subCategoryName',  flex: 1},

        ];

        this.callParent(arguments);
    }
});

There is no error in console. But I am not seeing any data in grid. How to resolve this?

2
extjsjsonprestful-urlextjs4.2

2 Answers

2
votes

Your server should not return simply:

callback({...})

Instead, it must read the value of the request GET param you've configured as callbackKey (in your case, that's 'callback'), and use this value as the name of the callback in the response. See section "Implementing on the server side" in the JsonP proxy doc.

For example, for its first request, the proxy will use an URL like this:

http://192.168.1.10:8080/CredoCustomerConnect/subcategory/getsubcategorylist/1/1/0?callback=Ext.data.JsonP.callback1

So the server response must be:

Ext.data.JsonP.callback1({ ... })

The second request URL would be something like:

http://192.168.1.10:8080/CredoCustomerConnect/subcategory/getsubcategorylist/1/1/0?callback=Ext.data.JsonP.callback2

Etc, etc.

0
votes

From Extjs docs:

JsonP proxy creates a temporary callback function, waits for it to be called and then puts the data into the Proxy making it look just like you loaded it through a normal AjaxProxy.

This code worked for me after a bit of tweaking around

Ext.define('My.Model', {
extend: 'Ext.data.Model',
fields: [
    'id', 'name'
],
proxy:{
    type : 'jsonp',
    url: 'http://127.0.0.1:8080',
    reader : {
        type : 'json',
        root : 'data'
    }
}

My.Model.load(1, {
                    callback: function(data) {
                    console.log(data);
                }
            });

Server side:

 // Retrieve the callback parameter
    cb = parms.get("callback");
    // Build response string
    msg = cb + "({ \"data\": [{\"id\": 1, \"name\": \"" + "username" + "\"}] });";
    //Return msg with status 200 OK and "text/javascript" header