Extjs store sync is not working when i insert value in store

Question

I have treePanel with widgetColumn which includes combobox widget in it wuth default text. My requirement is when i select the defalt text, one new record should get inserted in store & also get saved in database.

{
    text: 'TC',
    dataIndex: 'scrTC',
    xtype: 'widgetcolumn',
    widget: {
        xtype: 'combo',
        store: 'TCStore',
        valueField: 'id',
        displayField: 'name',
        matchFieldWidth: false,
        listeners: {
          select: 'selectDefault'
        }
    }
}

Controller Method:

selectDefault: function(combo){
  loadData(combo, id, name); //there is a logic to get id & name, then pass it to loadData method
}

loadData: function(combo, id, name){
   var store = combo.getStore();
  store.insert(0,{id: id, name: name});
  store.sync();
  combo.setValue(id);
}

Issue is when i first time select default text, store sync method is not inserting the data in database but the combo show the new value & store also the new value(seen using debugger). When i select again then the data is inserted into database.

I Debugged code, the execution flow is correct, only thing is sync is not calling backend to insert data at first instance, but works for second time. Can someone help.

Answer 1

If you assign id to the inserted record, sync thinks, that it already exists in the DB and won’t fire add event (inserted record won't get phantom property). Either rename id field or set idProperty for the model to something else.

Answer 2

The store will use it's proxy to sync the data with your backend, so ensure that it is configured to the type of backend that you are using. The store itself may be configured with a proxy, or it may be defaulting to the proxy on it's model. Without seeing the store configuration, I can't say for sure.

For example, if you are using a REST backend, then use a REST proxy on the model that the store is configured with: https://docs.sencha.com/extjs/6.6.0/modern/Ext.data.proxy.Rest.html