Combobox inside grid doesn't show data after rendering - combobox

Question

I have a grid that has combobox on one column. Data loads fine on the grid. But when I double click on one row to enable edit, the combobox doesn't show the data. (Please see the screenshot below) The highlighted part should show '1st Label'. But when I start to edit, it shows up like in the 2nd row with '2nd Label'.
I tried my code on 4.1 and it works fine. It seems 4.2.2 doesn't like combobox inside grid. Any help is really appreciated
This is my sample code. Please try it on Sencha's Code Editor to see both on 4.2.2 and 4.1.0
Ext.define('GridModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'int'
}, {
name: 'Value',
type: 'int'
}]
});
Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'ComboId',
type: 'int'
}, {
name: 'Label',
type: 'string'
}],
idProperty: 'Order'
});
Ext.create('Ext.data.Store', {
storeId: 'comboStore',
model: 'ComboModel',
data: [{
ComboId: 1,
Label: '1st Label'
}, {
ComboId: 2,
Label: '2nd Label'
}]
});
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
model: 'GridModel',
data: [{
Id: 1,
Value: 1
}, {
Id: 2,
Value: 2
}, {
Id: 3,
Value: 1
}, {
Id: 4,
Value: 2
}]
});
Ext.create('Ext.grid.Panel', {
width: 400,
height: 200,
renderTo: 'ct',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners: {
edit: function(editor, e) {
console.log(gridStore.getModifiedRecords());
}
}
})
],
store: Ext.data.StoreManager.lookup('gridStore'),
forceFit: true,
columns: [{
dataIndex: 'Id',
header: 'ID'
}, {
dataIndex: 'Value',
header: 'Label',
editor: {
xtype: 'combobox',
displayField: 'Label',
valueField: 'ComboId',
queryMode: 'local',
store: Ext.data.StoreManager.lookup('comboStore'),
allowBlank: true
},
renderer: function(value) {
var rec = comboStore.getById(value);
return rec ? rec.get('Label') : value;
}
}],
renderTo: Ext.getBody()
});