ext combobox editgrid

My solution to this problem is as follows:
I would like to get both the display text and the value text.
1)Define the comboBox
Code:
var displayTextCB = new Ext.form.ComboBox({
typeAhead: true,
mode: 'local',
triggerAction: 'all',
transform:'displayTextSel',
selectOnFocus:true,
lazyRender:true,
listClass: 'x-combo-list-small'
});)
Define two column field used for comboBox when new ColumnModel, one used for display only and the other contain the exact value.
Code
{
header: "Display Text",
dataIndex: 'displayText',
width: 130,
renderer: displayTextLabelValue,
editor: displayTextCB
},
{
header:"Display Value",
dataIndex: 'displayValue',
hidden: true
},
3)Define render function on the display field,say displayTextLabelValue
which has two function:
a) return the text to the display Name with combobox
b) set value to the hidden diaplay value
Code:
function displayTextLabelValue(val, params, record){
//store value in hidden column
var opts = displayNameCB.store.data.items;
for(var i = 0, len = opts.length;i < len; i++){
if (opts[i].data.value == val){
record.data.displayValue=val;
return opts[i].data.text;
}
}
return val;
};

or

Then in the 'afteredit' event of the grid I add/update the value to the record

Code:
grid.on('afteredit', function(o){
if(o){
var grid=o.grid;
var record=o.record;
var cm=grid.getColumnModel();
var editor=cm.getCellEditor( o.column, o.row);
var v=editor.getValue();

if(editor.field.hiddenField){
var v=editor.field.hiddenField.value;
record.set('selected', v);
}
}
});Finally, when you get modified records the value is there
Code:
Ext.getCmp('saveButton').on('click', function(...){
var grid=Ext.getCmp('dispatchlogic_grid');
var modified=grid.getStore().getModifiedRecords();
for(var i=0;i<modified.length;++i){
}
});