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

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