Using Jsonp in proxy in model in extjs 4.2.1 - extjs

Question

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?

Answer 1

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.

Answer 2

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