ExtJS Combobox Rowediting Not Displaying The Latest Value After Click Update - extjs

Question

I got this one rowediting with combobox for my project. The value displayed in the rowediting is coming from DB, then user can edit the value in rowediting. I got problem when i edit the combobox in it. The combobox display back the previous value after I click Update. The other fields are okay. The backend side also okay if I submit the grid form. The only problem right now is the combobox display. Anyone have any idea on this? Thank you so much in advanced :)
Screenshot image:
This is my JS code:
items: [
{
xtype: 'grid',
name: 'prescriptionGrid',
reference: 'prescriptionGrid', flex: 1, height: 200, scrollable: true,
store: {
type: 'array' ,
fields: ['id',
'inventorycatid',
'stationid',
'route',
'frequency',
'dose',
'duration',
'medicationName',
'quantity']
},
listeners: {
validateedit: 'prescriptionGridItemValidate',
beforeedit: 'prescriptionbeforeedit',
},
columns: [
{ text: 'Max Request Quantity', hidden: true, dataIndex:'maxRequestQuantity' },
//{ text: 'Created By', hidden: true, dataIndex:'createdby', name: 'createdby', value: data.createdbyname, reference:'createdby',},
{ text: 'Medication Name',
dataIndex: 'inventorycatid',
flex: 4,
reference: 'medicationName',
renderer: 'showPrescriptionItem',
editor: {
xtype: 'combobox',
name: 'inventorycatid',
minChars: 0,
queryMode: 'remote',
queryParam: 'cbxname',
store: {
type: 'InventoryCat',
autoLoad: true,
remoteFilter: true,
filters: [{ property: 'typename', value: 'Inventory:Medicine' }],
},
/* remoteFilter: false, */
valueField: 'id',
displayField: 'name',
forceSelection: true,
editable: false,
allowBlank: false,
listeners: {
select: 'inventorycatComboSelected',
}
}
},
{ text: 'Route',
dataIndex: 'route',
flex: 2,
reference: 'route',
editor: {
xtype: 'combobox',
queryMode: 'local',
displayField: 'name',
valueField: 'name',
store: [
{ id: '250', name: 'Tab (Tablet)' },
{ id: '251', name: 'Caps (Capsule)' },
{ id: '252', name: 'Syrup' },
{ id: '253', name: 'IM (Intramuscular)' },
{ id: '254', name: 'IV (Intravenous)' },
{ id: '255', name: 'LA (Local Application)' },
{ id: '256', name: 'SL (Sublingual)' },
{ id: '257', name: 'SC (Subcutaneous)' },
],
editable: false,
name: 'route'
}
},
{ text: 'Dose',
dataIndex: 'dose',
flex: 1,
reference: 'dose',
editor: {
name: 'dose', allowBlank: false
}
},
{ text: 'Frequency',
dataIndex: 'frequency',
flex: 2,
reference: 'frequency',
editor: {
xtype: 'combobox',
queryMode: 'local',
displayField: 'name',
valueField: 'name',
store: [
{ id: '250', name: 'Daily' },
{ id: '251', name: 'Every other day ' },
{ id: '252', name: 'BD (2x a day)' },
{ id: '253', name: 'TDS (3x a day) ' },
{ id: '254', name: 'QID (4x a day)' },
{ id: '255', name: 'Q4h (Every 4 hrs)' },
{ id: '256', name: 'Q4h-6h (Every 4 to 6 hrs) ' },
{ id: '257', name: 'qwk (every week)' },
],
name: 'frequency', allowBlank: true
}
},
{ text: 'Duration',
dataIndex: 'duration',
flex: 1,
reference: 'duration',
editor: {
name: 'duration', allowBlank: false
}
},
{
text: 'Quantity',
dataIndex: 'quantity',
flex: 1,
reference: 'quantity',
editor: {
name: 'quantity', allowBlank: false
}
}
],
selType: 'rowmodel',
plugins: [
{ ptype: 'rowediting', id: 'rowEditPlugin', clicksToMoveEditor: 1, autoCancel: false,
}
]
},
],
And here is my ControllerJS:
showPrescriptionItem: function(value, metaData, record, rowIndex, colIndex, store, view) {
console.log(record.data, "ShowPrescription"); //After edit, capture correct inventorycat but wrong medicationName
// console.log(value, "ShowPrescription2");
return record.get('medicationName') || this.getViewModel().get('inventoryMap')[value];
},
inventorycatComboSelected: function(combo, record) {
var vm = this.getViewModel(),
map = vm.get('inventoryMap');
map[record.id] = record.data.name;
vm.set('inventoryMap', map);
console.log(record.data, "InventorycatSelected"); //After edit, capture correct id & name
//return(map);
// var itemRecord = combo.up('editor').context.record;
},
prescriptionGridItemValidate: function(editor, e) {
rowIndex = e.rowIdx;
var itemid = editor.editor.form.findField('inventorycatid').getValue();
var unit = editor.editor.form.findField('quantity').getValue();
if(!Ext.isNumeric(unit)) {
Ext.Msg.alert('Error', 'Quantity must be in numeric');
e.cancel = true;
}
else if(parseInt(unit) < 0) {
Ext.Msg.alert('Error', 'The quantity has to be 0 or more');
e.cancel = true;
}
else {
e.cancel = false;
}
console.log(e.newValues,'context')
},
prescriptionbeforeedit: function(elemnt,cell){
if (cell.record.data.inventorycatid != ''){
elemnt.editor.form.getFields().items[0].setDisabled(true)
elemnt.editor.form.getFields().items[0].setRawValue(cell.row.cells[0].textContent)
} else {
elemnt.editor.form.getFields().items[0].setDisabled(false)
}
},

Answer 1

Tq for ur respond. I have fixed this issue before. I changed my renderer code as below & it works:
showPrescriptionItem: function(value, metaData, record, rowIndex, colIndex, store, view) {
var map = this.getView().getViewModel().get('inventoryMap');
var medicationName = record.get('medicationName');
//console.log(map[value], 'map value');
if(medicationName !== '' && map[value] == undefined) {
console.log(medicationName, "ShowPrescriptionOldVal");
return medicationName;
}
else {
console.log(map[value], "ShowPrescriptionNewVal");
return map[value];
}
}