View Full Version : displayField for ComboBox on EditorGridPanel

6 Jul 2010, 7:06 AM

I placed a ComboBox on an EditorGridPanel and configured a displayField and a valueField. The Docu says:
Note: if using a ComboBox in an Editor Grid a renderer will be needed to show the displayField when the editor is not active.I've tried several ways to accomplish that, but nothing happened.

renderer: function(value, metaData, record, rowIndex, colIndex, store) {
// console.log(value);
// console.log(record);
// return value;
// return record.description;
// return record.data.description;
return record.data['description'];
},Even a console.log() would'nt dump anything. Also I'm a bit confused, since 'rendered' is a config option of Ext.grid.Column. Does the ComboBox inherit the options when placed on a EditorGridPanel?

Any ideas are greatly appreciated.

6 Jul 2010, 9:01 AM
Did you have a look at the example with the reusable renderer?

Initially, the combo and the grid column know nothing about each other but two things:

If you click on a cell to edit it, the assigned renderer is shown and the current value in the grid record's field is set as the editor's value
When you stop editing, the combo is hidden and the current value of the combo is assigned to the grid record's field

So to display the same text as selected in the combo, your column's renderer must take this value and look it up in the store of the combo, not in the grid's store, as your code tries.

var gridstore = new Ext.data.ArrayStore({
fields: [ 'name', 'workshift' ],
data: [
[ 'john', '0' ],
[ 'jane', '1' ],
[ 'jim', '3' ],
[ 'jessy', '2' ]

var combostore = new Ext.data.ArrayStore({
fields: [ 'shift', 'title' ],
data: [
[ '0', 'morning' ],
[ '1', 'day' ],
[ '2', 'evening' ],
[ '3', 'night' ]

var shiftcombo = new Ext.form.ComboBox({
store: combostore,
typeAhead: true,
lazyRender: true,
triggerAction: 'all',
mode: 'local',
displayField: 'title',
valueField: 'shift'

var shiftrenderer = function(val) {
var recnum = combostore.find('shift', val);
if( recnum > -1 ) {
return combostore.getAt(recnum).get('title');
return val;

var colmodel = new Ext.grid.ColumnModel([
{ header: 'Name', dataIndex: 'name' },
{ header: 'Shift', dataIndex: 'workshift', editor: shiftcombo, renderer: shiftrenderer }

var grd = new Ext.grid.EditorGridPanel({
title: 'Working shift for today',
cm: colmodel,
store: gridstore,
width: 500,
height: 400,
renderTo: document.body,
forceFit: true

7 Jul 2010, 1:48 AM
Oh right. I totally forgot about that. Thank you very much.

7 Jul 2010, 1:53 AM
Also have a look at the combocolumn feature request example code.