带同步的行编辑网格

Question

我尝试实现像 this example 这样的通用行编辑网格，不同之处在于我想将更改与服务器后端同步。到现在为止，我可以使用 onRoweditAdd 添加一个新行。

Ext.define('Mb.view.base.RoweditListController', {
    extend: 'Ext.app.ViewController',
    alias: 'controller.roweditlist',
    onRoweditAdd: function(me){
        var grid = me.up('panel'),
            edit = grid.editingPlugin,
            store = grid.getStore(),
            record = store.getModel().create({id: 0});
        edit.cancelEdit()
        store.insert(0, record)
        edit.startEdit(record, 0)
    },
    editRowedit: function(editor, ctx) {
        var store = ctx.grid.getStore();
        store.sync()
    }
})

问题是 store.sync() 没有向服务器发送 create 请求，而是 update 请求。看起来 store.insert(0, record) 没有计算在内。只有用户所做的修改才会同步。罪魁祸首是什么？

Answer 1

不幸的是，我无法创建重现该问题的fiddle。

我通过更改这一行解决了它：

record = store.getModel().create({id: 0});

至

record = store.getModel().create({});

问题与自 ExtJs 5 以来记录 ID 的新实现有关。但我无法解释...

ExtJs 6 不再支持使用 id: 0 创建新记录。

Answer 2

通过在记录中提供现有的 id，ExtJS 假定该记录已存在于您的商店中并且必须更新。如果您不提供 id，那么它会认为这是一条新创建的记录，并且会走创建路线。这是基于您使用生成的 ID 策略（您通常应该这样做）的假设，因此您永远不会在创建时自己提供 ID。

在幕后，ExtJS 将记录标记为幻影：true 或 false。幻影记录是那些只存在于前端，还没有被持久化的记录。创建没有 id 的记录会将其标记为幻影，而创建具有已提供 ID 的记录不会将其标记为幻影并且不会触发创建调用，而是触发更新

Answer 3

我发现在Ext.data.Model中idProperty被用作识别记录的唯一键。默认情况下，它有 id 字段集。如果您提供副本，那么它将在 store.

中引起问题

ExtJS 文档中已经写了这个描述

The data values for this field must be unique or there will be id value collisions in the Ext.data.Store.
Defaults to:
'id'

请参考link

带同步的行编辑网格

rowedit grid with sync

extjs

extjs-stores

extjs6