How do I stop a clicked combo box from clearing its value? - extjs

Question

I'm trying to edit a combobox value. But what happens is when I click a grid cell the old value disappears I want to keep a the and also avoid the user to select the values form the combo box itself and not values other than those in the drop down
How can i achieve these two things.
{
text: 'Food Items',
xtype: 'gridcolumn',
dataIndex: 'food_lister',
flex: 1,
renderer: function (value) {
console.log()
if (Ext.isNumber(value)) {
var store = this.getEditor().getStore();
return store.findRecord('foodid', value).get('fooddescp');
}
return value;
},
editor: {
xtype: 'combobox',
allowBlank: true,
displayField: "fooddescp",
valueField: "foodid",
queryMode: 'local',
mapperId: 'getfooddescrip',
lastQuery: '',
forceSelection: true,
listeners: {
expand: function () {
var call = this.up('foodgrid[itemId=fooditemgrid]').getSelectionModel().selection.record.data.foodname.trim();
this.store.clearFilter();
//this.store.filter('call',call);
this.store.filter({
property: 'call',
value: call,
exactMatch: true
})
}
}
}
}

Answer 1

Use editable : false in combo check the updated example
click here
Edit: As per your comment if you still want to use editable true and restric the value other than the store you have to handle it in cell editing event validateedit
plugins: {
ptype: 'cellediting',
clicksToEdit: 1,
listeners: {
validateedit: function( editor, context, eOpts ){
var store = context.column.getEditor().store,
record = context.record;
if(store.find('id',context.value) === -1){
context.cancel = true;
}
}
}
}
Above code is based on my example. Please check running example in my fiddle