ExtJS 5：当需要 POST 和 JSON 正文时，如何设置存储以收集远程数据？

Question

我需要一个商店来从 URL 收集数据，但是 URL 需要 POST 的 JSON 数据才能创建正确的响应（在此示例是用户必须根据其购物车中的产品回答的一组免责声明问题。）

这是我目前所拥有的。我想发送购物车并获得响应中的问题集：

QuestionStore: {
            autoLoad: false,
            model: 'RefCig.model.Question',
            proxy: {
                type: 'ajax',
                url: '/refcig-services/questionsForCart',
                actionMethods: {
                    create: 'POST',
                    read: 'POST',
                    update: 'POST',
                    destroy: 'POST'
                },
                headers: {
                    'Content-Type': 'application/json; charset=utf-8'
                },
                reader: {
                    type: 'json'
                },
                writer: {
                    type: 'json'
                }
            }
        }

提交时：

var cartStore = Ext.getStore('CartStore');
cartItems = Ext.Array.pluck(cartStore.data.items, 'data');
var questionStore = this.getStore('QuestionStore');
questionStore.load({params:cartItems});

Ext.encode(cartItems) 的 console.log 正是我要发送到后端的内容：

[{
    "id": 19,
    "pricePerUnit": 20,
    "denominationsPerUnit": 1,

    "blahblahblah": 1, 

    "unitQuantity": 1,
    "total_item_count": null,
    "subtotal": 20
}]

但请求格式不正确：

{
    "0": {
        "id": 19,
        "pricePerUnit": 20,
        "denominationsPerUnit": 1,

        "unitQuantity": 1,
        "total_item_count": null,
        "subtotal": 20
    },
    "page": 1,
    "start": 0,
    "limit": 25
}

我应该如何告诉我的 QuestionStore 按照我想要的方式形成它的请求正文？

提前致谢。

Answer 1

从技术上讲，您的要求可以通过使用自定义代理来满足。您在其中实现自己的 buildRequest 方法，这是 original one:

的精简版本

Ext.define('MyProxy', {
    extend: 'Ext.data.proxy.Ajax',
    alias: 'proxy.my',
    paramsAsJson: true,
    buildRequest: function(operation) {
        var me = this,
            params = operation.getParams(),
            request, operationId, idParam;
        operationId = operation.getId();
        idParam = me.getIdParam();
        if (operationId !== undefined && params[idParam] === undefined) {
            params[idParam] = operationId;
        }
        request = new Ext.data.Request({
            params: params,
            action: operation.getAction(),
            records: operation.getRecords(),
            url: operation.getUrl(),
            operation: operation,
            proxy: me
        });
        request.setUrl(me.buildUrl(request));
        operation.setRequest(request);
        return request;
    }
});

然后，在商店定义中，您只需使用代理：

proxy: {
    type: 'my',
    // .....

不过，我会推荐另一种方式。

做类似的事情：

questionStore.load({params: {cartItems: cartItems}});

而不是

questionStore.load({params:cartItems});

这将使请求正文看起来像这样：

{
    "cartItems": [{
        "id": 19,
        "pricePerUnit": 20,
        "denominationsPerUnit": 1,
        "blahblahblah": 1, 
        "unitQuantity": 1,
        "total_item_count": null,
        "subtotal": 20
    }],
    "page": 1,
    "start": 0,
    "limit": 25
}

您需要调整服务器端以从有效负载中检索 cartItems 数组。

ExtJS 5：当需要 POST 和 JSON 正文时，如何设置存储以收集远程数据？

ExtJS 5: how to set up a store to gather remote data when a POST with JSON body is required?

json

extjs

sencha-architect

extjs5