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

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.

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.