extjs - 在 extjs 4.2.1 模型中的代理中使用 Jsonp

Question

我正在模型中的 sencha extjs 4.2.1 中调用 Rest Web 服务。我的模型是

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'
           }
        }

}); 

当我调用网址 'http://192.168.1.10:8080/CredoCustomerConnect/subcategory/getsubcategorylist/1/1/0',

在浏览器中，我得到的结果如下

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"})

但我在 GridView 中没有看到任何数据。

Rest Web 服务方法是

@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");
        }    
     }

我的商店是

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

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


        }
    });

我的观点是

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);
    }
});

控制台没有错误。但我在网格中没有看到任何数据。 如何解决这个问题？

Answer 1

您的服务器不应简单地返回:

callback({...})

相反，它必须读取您配置为 callbackKey 的请求 GET 参数的值(在您的情况下，即“callback”)，并使用此值作为响应中回调的名称。请参阅 JsonP proxy doc 中的“在服务器端实现”部分。 .

例如，对于第一个请求，代理将使用如下 URL:

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

所以服务器响应必须是:

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

第二个请求 URL 类似于:

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

等等等等