View Full Version : selected value of ComboBox from the EditorGridPanel

2 Jul 2010, 6:44 AM
I have a EditorGridPanel which shows the certain information with ComboBox. I have filled ComboBox list with the items and the id of that items. I have also used a toolbar to add new records to the grid. The problem is when the option of the toolbar is used to add a new record to the grid it shows the proper editors but when a option is selected from de ComboBox and as soon as I move to the next column it shows the selected value(id) of the ComboBox instead of ComboBox select text. I need to select the value (id of the selected item ) of ComboBox to be saved to the database but I need to show in the EditorGridPanel the selected tex. Here is the code:


/*******************Creacion Grid******************/
////////////////Grid Tareas////////////////
storeTareas = new Ext.data.JsonStore(
url: '/frontend_dev.php/def_checklist/getTareas',
root: 'tareas',
totalProperty: 'total',
{name:'checklist_cab_id', mapping:'checklist_cab_id'},
{name:'tarea_id', mapping:'tarea_id'},
{name:'peso', mapping:'peso'}

var smTareas = new Ext.grid.CheckboxSelectionModel(
selectionchange: function(sm)
if (sm.getCount())

var cmTareas = new Ext.grid.ColumnModel(
id: 'checklist_cab_id',
header: 'ChecklistCabId',
dataIndex: 'checklist_cab_id',
hidden: true,
hideable: false
id: 'tarea_id',
header: 'Tarea',
dataIndex: 'tarea_id',
width: 100,
sortable: true,
editor: new Ext.form.ComboBox(
typeAhead: true,
triggerAction: 'all',
// transform the data already specified in html
transform: 'tarea',
lazyRender: true,
listClass: 'x-combo-list-small'
header: 'Peso',
dataIndex: 'peso',
width: 50,
sortable: true,
align: 'right',
editor: new Ext.form.NumberField(
allowBlank: false,
allowNegative: false,
maxValue: 100

gridTareas = new Ext.grid.EditorGridPanel(
store: storeTareas,
cm: cmTareas,
sm: smTareas,
renderTo: 'tareas',
width: 730,
height: 275,
viewConfig: { forceFit:true },
columnLines: true,
loadMask: {msg:'Cargando ...'},
autoScroll: true,
tooltip:'Elimina el item seleccionado',
handler: function(){ eliminarSeleccion(gridTareas); },
ref: '../removeButton',
disabled: true
text: 'Agregar',
handler : function()
// access the Record constructor through the grid's store
var Tarea = gridTareas.getStore().recordType;
var t = new Tarea(
checklist_cab_id: '',
tarea_id: '',
peso: 0
storeTareas.insert(0, t);
gridTareas.startEditing(0, 0);
title: 'Seleccione las Tareas que conforman el Checklist',
autoExpandColumn: 'tarea_id',
frame: true,
clicksToEdit: 1
// trigger the data store load

But i don't find the way to get it. Thanks in advance

2 Jul 2010, 7:02 AM
The combobox is only used if the cell is edited. You also need a renderer to display the correct text when the cell is not being edited.

The simplest solution is to use a combocolumn (http://www.sencha.com/forum/showthread.php?67488-3.x-Ext.grid.ComboColumn-amp-Ext.util.Format.comboRenderer&p=325074#post325074).

2 Jul 2010, 9:04 AM
Thanks for your answer, Im interesting in the first solution. Can you explain to me how implement it? By the way, when I try to implement the combocolumn solution it showme an error:

Ext.grid.ComboColumn is not a constructor
chrome://firebug/content/blank.gif editor: combo});