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

【问题标题】：Using Jsonp in proxy in model in extjs 4.2.1在 extjs 4.2.1 模型中的代理中使用 Jsonp
【发布时间】：2013-06-01 03:23:36
【问题描述】：

我正在模型中从 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"})

但我在网格视图中没有看到任何数据。

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

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

【问题讨论】：

标签： extjs jsonp restful-url extjs4.2

【解决方案1】：

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

callback({...})

相反，它必须读取您配置为 callbackKey 的请求 GET 参数的值（在您的情况下，即“回调”），并使用此值作为在响应中回调。请参阅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

等等等等

【讨论】：

我已经更新了其余的网络服务代码。你能详细解释一下吗
From fire bug : Request Url is 192.168.1.10:8080/CredoCustomerConnect/subcategory/… 服务器响应是 Ext.data.JsonP.callback1({ ... })。即使在响应中我也看到了数据。我的代码有什么问题

【解决方案2】：

来自 Extjs 文档：

JsonP 代理创建一个临时回调函数，等待它被调用，然后将数据放入代理中，使其看起来像你通过一个普通的 AjaxProxy 加载它。

经过一些调整后，这段代码对我有用

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

服务器端：

 // 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

【讨论】：