rowedit grid with sync

Question

I try to implement a general rowediting grid like this example, with the difference that I would like to sync the changes with the server backend. Until now, I can add a new line with 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()
    }
})

The problem is that store.sync() does not send a create request to the server, but an update request. It looks like store.insert(0, record) is not accounted for. Only the modification done by the user is synched. What could be the culprit ?

Answer 1

Unfortunately, I was not able to create a fiddle that reproduces the problem.

I solved it by changing this line:

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

to

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

The problem has to do something with the new implementation of the record ids since ExtJs 5. But I cannot explain it...

The creation of a new record with id: 0 must no longer be supported in ExtJs 6.

Answer 2

I found that in Ext.data.Model idProperty is used as unique key to identify record. By default it hasid field set. If you provide it duplicate, then it will cause issue in store.

This description has written in ExtJS doc

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

Please refer link

Answer 3

By giving an existing id in a record, ExtJS assumes this record already exist in your store and has to be updated. If you don't give an id then it supposes it is a newly created record and will go the create route. This comes from the assumption that you use a generated ID strategy (which you generally should) and thus you would never provide IDs yourself upon creation.

Under the hood, ExtJS marks the record as phantom: true or false. Phantom records are the ones that only exist in the front end and haven't been persisted yet. Creating a record with no id will mark it as phantom whereas creating a record with an id already provided will not mark it as phantom and will not trigger a create call but an update instead