Hello,
I use ExtReact and I'm new in sencha.
I create my first application that call some CRUDS from my Django API.
I have some problems with creating new records.




I extended the proxy.REST like this:
Code:
Ext.define('Infojuice.proxy.DjangoProxy', {
    extend: 'Ext.data.proxy.Rest',
    alias: 'proxy.djangoproxy',


    buildUrl: function(request) {
        console.log(request.config)
        if (request.config.action === "update" || request.config.action === "destroy") {
            var url = Ext.data.proxy.Rest.prototype.buildUrl.apply(this, arguments);
            var newUrl = url.replace('?', '/?')
            return newUrl;
        }
        return Ext.data.proxy.Rest.prototype.buildUrl.apply(this, arguments);
    }
});

I use it in my model like this:
Code:
export default Ext.define('InvoicePeriod', {
    extend: 'Ext.data.Model',
    idProperty : "id",
    fields: [
        {
            name: 'id',
            infojuice_type: 'number',
            dimension: 1,
            editable: true,
            disabled: true,
        }, {
            name: 'model_id',
            infojuice_type: 'number',
            dimension: 1,
            editable: false,
            disabled: true,
        }, {
            name: 'name',
            infojuice_type: 'string',
            required: true,
            editable: true,
            dimension: 4,
            title: 'Nome'
        }, {
            name: 'days_interval',
            infojuice_type: 'number',
            required: true,
            editable: true,
            dimension: 1,
            title: 'Frequenza (giorni)'
        }
    ],
    proxy: {
        type: 'djangoproxy',
        url: API_URL,
        headers: {
            'Authorization': `token ${API_TOKEN}`,
            'Content-Type': 'application/json',
        },
        reader: {
            type: 'json',
            rootProperty: function(data){
                // Extract child nodes from the items or children property in the dataset
                return data.results
            }
        },
        writer: {
            type: "json",
            writeAllFields: true
        }
    }
})
Finally, I use this model and this proxy to create a store and use it to show a Grid:


Code:
_createTableStore = (model) => {
    // Create instance of Ext.data.Store
    return Ext.create('Ext.data.Store', {
        autoLoad: true,
        model,
        proxy: model.proxy,
        listeners: {


            update: function(store, records, operation, modifiedFieldNames, details, eOpts){
                if (operation === "commit") {
                    // TODO: Put id returned by api
                    console.log(eOpts)
                    console.log(details)
                    return false;
                }
                var record = Ext.create(store.model.$className, records.data);
                record.save(
                    {
                        failure: function(record, operation) {
                            // do something if the save failed
                            Ext.Msg.alert(
                                'Errore',
                                'Si è verificato un errore durante la richiesta. Messaggio dal server:</br>' +
                                operation.error.response.responseText
                            );
                            return false;
                        },
                        success: function(record, operation) {
                            // do something if the save succeeded
                            Ext.toast('Richiesta completata con successo');
                        },
                        callback: function(record, operation, success) {
                            // do something whether the save succeeded or failed
                        }
                    }
                ); //POST /users
            },
            remove: function(store, records, index, isMove, eOpts){
                records.forEach(record => {
                    record.data.id = null;
                    record.erase(); //DELETE /users
                });
            },
            add: function(store, records, index, modifiedFieldNames){
                console.log("**** Lancio add");
                console.log(store, records, index, modifiedFieldNames);
                records.forEach(record => {
                    record.data.id = null;
                    record.save(
                        {
                            failure: function(record, operation) {
                                // Toast user Add record fail!
                                Ext.Msg.alert(
                                    'Errore',
                                    'Si è verificato un errore durante la richiesta. Messaggio dal server:</br>' +
                                    operation.error.response.responseText
                                );
                                // Remove record in case of failure
                                store.remove(record);
                            },
                            success: function(record, operation) {
                                // Toast user Add record complete
                                Ext.toast(
                                    'Richiesta completata con successo, ricaricare la pagina per avere l\'id'
                                );
                            },
                            callback: function(record, operation, success) {
                                // do something whether the save succeeded or failed
                            }
                        }
                    ); //POST /users
                });
            },
        }
    });
}


I can show, edit, remove and add items correctly, BUT if I add a new item, the id is not the ID of newly created item taken from server response, but the ID of the model, made liek "ModelName-1".
I can't use my API with this id, I need to store the model with my API integer Id.


To add a new record I extend the "editable" plugin of the grid, I post my "onSubmitTap" method:


Code:
onSubmitTap: function() {


    // Get values from form
    let values = this.form.getValues();


    // FIXME: force expiration date is not the solution
    // COMBAK: you have to create a method that read model, return the date
    // keys and edit values with new formatted values.
    if (values && values.hasOwnProperty('expiration_date')) {
        // Get date value
        let dt = values['expiration_date'];
        // Format as API will
        dt = Ext.Date.format(dt, 'Y-m-d');
        // Set new date value into values
        values['expiration_date'] = dt;
    }


    // FIXME: add groups empty array to create an user
    // Delete me after API edit.
    if (values && values.hasOwnProperty('groups')) {
        // To avoid http error set an empty array because field is required
        values['groups'] = [];
    }


    this.form.getRecord().set(values);
    var newRecord = this.form.getRecord().data
    newRecord.id = null;


    var grid = this.getGrid()
    grid.getStore().add(newRecord);
    this.sheet.hide();
},
I try to log the id in different part of the code, but the only part where I can see the correct ID is inside data variable of "rootProperty" of Model declaration.
If I reload page, the request download correct data with correct ID: the problem is only when I post new model.


Where Am I wrong? Why the server id is override by the model id?
Thanks in advance.