如何将几个 EXTJS Grids 数据写入一个请求？

Posted 2023-03-16

【中文标题】如何将几个 EXTJS Grids 数据写入一个请求？

【英文标题】：How to write a few EXTJS Grids data into one request?

【发布时间】：2011-11-08 08:05:36

【问题描述】：

例如我有 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", ... ]

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

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

【参考方案1】：

解决方案是将数据存储在内存中，并在 Save 上手动填充同步存储并调用 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();

【参考方案2】：

我通过创建自定义 Writer（在我的例子中扩展 Ext.data.writer.Json）解决了同样的问题。在您的场景中，这将用作 Order 存储的编写器。我的产品商店是只读的（我从不与服务器同步）。

我的作者重写了 getRecordData() 函数。首先，它执行标准的 getRecordData() 处理以获取订单数据，然后遍历产品商店的条目以创建产品记录数组。然后我将此数组添加到订单的数据中（使用“产品”键。

【讨论】：

好吧.. 我已经以另一种方式实现了它：构建 Ajax 请求，将网格数据更改为服务器。一切正常，除了一件事。数据成功更新后，我需要告诉网格重绘并刷新它存储，这意味着从存储中删除更新/创建的记录（更改在单元格左上角显示为红色矩形）:(...