extjs - 如何将一些 EXTJS Grids 数据写入一个请求？

Question

例如我有 2 个模型:

Ext.define('Order', {
    extend   : 'Ext.data.Model',
    fields   : [
            {name : 'id',          type : 'int'},
            {name : 'customer_id', type : 'int'},
            {name : 'date',        type : 'date'}
    ],
    hasMany: [{model: 'Product', name: 'Products'}]
});

Ext.define('Product', {
    extend   : 'Ext.data.Model',
    fields   : [
            {name : 'id',          type : 'int'},
            {name : 'name',        type : 'string'},
            {name : 'description', type : 'string'},
            {name : 'price',       type : 'float'}
    ],
    belongsTo: 'Order'
});

这些模型显示在 2 个网格中。然后，当进行更改时，我需要将它们发布到服务器。但我需要在一个请求中发布两个模型，例如:

{"order":{"id":1, "date":'2011.09.01', "Products": [{"id":1, "name":"product name", ... }]}}

通过这种方式，我认为两个网格都应该使用一个存储，并且在写入存储之前必须填充网格更改(也许一些内部存储无法写入服务器)。

如何实现？有什么想法吗？

Answer 1

解决方案是将数据存储在内存中，并在保存时手动填充同步存储并调用 Save 方法:

Ext.define('OrderStore', {
    extend: 'Ext.data.Store',

    storeId: 'orderStore',
    proxy: {
        type: 'ajax',
        api: {
            read: 'Order/Load',
            create: 'Order/Add',
            update: 'Order/Update',
            destroy: 'Order/Delete'
        },
        reader: {
            type: 'json',
            root: 'orders',
            totalProperty: 'total',
            messageProperty: 'message',
            successProperty: 'success'
        },
        writer: {
            type: 'json',
            listful: true,
            writeAllFields: true,
                    getRecordData: function (record) { return record.data; },
            root: 'order',
            allowSingle: true
        },
        headers: { 'Content-Type': 'application/json; charset=UTF-8' }
    },
    autoLoad: true,
    listeners: {
        // commit changes
        write: function (store, operation, eOpts ) {
            var orderItemsStore = OrderEdit.store;
            orderItemsStore.each( function (item) {
                item.commit();
            });

            // ...
        }
    }
});

地点:

Ext.define('OrderEdit', {
    // ...
    orderStore: Ext.create('OrderStore', {model: 'Order', owner: this}),
    store: Ext.create('OrderItemStore')

和

Ext.define('OrderItemStore', {
    extend: 'Ext.data.Store',

    model: 'Order',
    proxy: {
        type: 'memory'
    }
});

然后保存更改:

saveButtonClick: function (button) {
    var order = OrderEdit.orderStore.getRange()[0];
    res = order.data;
    res.Items = [];
    OrderEdit.store.each(function (record, index) {
            res.Items[index] = record.data;
    });
    // ...

    OrderEdit.orderStore.removeAll();
    OrderEdit.orderStore.add(res);
    OrderEdit.orderStore.save();
}