PDA

View Full Version : selected value of ComboBox from the EditorGridPanel



jocampo
2 Jul 2010, 6:44 AM
Hi
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:



Ext.onReady(function()
{
//Ext.QuickTips.init();

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

var smTareas = new Ext.grid.CheckboxSelectionModel(
{
listeners:
{
selectionchange: function(sm)
{
if (sm.getCount())
{
gridTareas.removeButton.enable();
}
else
{
gridTareas.removeButton.disable();
}
}
}
});

var cmTareas = new Ext.grid.ColumnModel(
[
smTareas,
{
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(
{
id:'gridTareas',
store: storeTareas,
cm: cmTareas,
sm: smTareas,
renderTo: 'tareas',
width: 730,
height: 275,
viewConfig: { forceFit:true },
columnLines: true,
loadMask: {msg:'Cargando ...'},
autoScroll: true,
tbar:[
{
text:'Eliminar',
tooltip:'Elimina el item seleccionado',
iconCls:'remove',
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
});
gridTareas.stopEditing();
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

Condor
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).

jocampo
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});