ExtJS 5:当需要带有JSON主体的POST时,如何设置商店来收集远程数据?

时间:2015-06-26 16:07:04

标签: json extjs extjs5 sencha-architect

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

这是我到目前为止所拥有的。我想发送购物车并回答问题:

Button

提交时:

// Initialize a RECT with the size you want the client area to be.
RECT rc = { 0, 0, width, height };
// Now adjust the rectangle to the size the window would need to be.
AdjustWindowRect(&rc, my_style_flags, FALSE);

// Now create the window using the sizes in rc.  Make sure you use
// consistent style flags or the adjustment may not be correct.
const int window_width = rc.right - rc.left;
const int window_height = rc.bottom - rc.top;
my_hwnd = CreateWindow(..., my_style_flags, x, y, window_width, window_height, ...);

Ext.encode(cartItems)的console.log正是我想要发送到后端的:

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

我应该如何告诉我的QuestionStore以我想要的方式形成其请求体?

提前致谢。

1 个答案:

答案 0 :(得分: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数组。