View Full Version : Combobox in editable Gridpanel not displaying displayField

18 Aug 2011, 4:26 AM
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: [

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: [
data: [[1, 'Email'], [2, 'SMS']]
valueField: 'id',
displayField: 'name',
triggerAction: 'all'

18 Aug 2011, 4:37 AM
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

18 Aug 2011, 4:43 AM
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...

18 Aug 2011, 5:41 AM
That turned out to be extremely easy... Thanks

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