Combobox in editable Gridpanel not displaying displayField

[mcryan]

Not sure if this should be posted in the bugs section or if I am missing something obvious here.

As the title suggests, I have a combobox in a grid with cell editing. Once I select an option from the combo, the cell is updated with the valueField rather than the configured display field, though the dropdown is correctly displaying the displayField

Here is my code:


Ext.define('Grid', {
extend: 'Ext.grid.Panel',
requires: [
'Ext.grid.plugin.CellEditing',
'Ext.form.field.Text',
'Ext.toolbar.TextItem'
],


initComponent: function() {
this.editing = Ext.create('Ext.grid.plugin.CellEditing');
Ext.apply(this, {
iconCls: 'icon-grid',
frame: false,
plugins: [this.editing],
columns: [{
text: 'ID',
width: 40,
sortable: true,
dataIndex: 'id',
hidden: true
}, {
header: 'Type',
width: 120,
sortable: true,
dataIndex: 'type',
field: {
xtype: 'combobox',
queryMode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'id',
'name'
],
data: [[1, 'Email'], [2, 'SMS']]
}),
valueField: 'id',
displayField: 'name',
triggerAction: 'all'
}
}]
});
this.callParent();
}
});

[tobiu]

sounds a bit like a feature request.

i normally create a custom renderer for such grid-columns and let them address the same store the combo has (matching value to displayField)


best regards
tobiu

[mcryan]

I didn't think it was a feature request as I only want the combo to behave as it does outside of a grid, I thought that would be expected?

Anyhow, I will throw a renderer in there and see what happens. Thanks...

[mcryan]

That turned out to be extremely easy... Thanks


renderer: function(value) {
return value == 1 ? 'Email' : 'SMS';
}