Sencha grid: hidden column and combobox - extjs4

Question

First a small portion of the code:
{ text: 'TipoVisitaID',
hidden: true,
dataIndex: 'TipoVisitaID',
itemId: 'TipoVisitaID'
}, {
text: 'TIPO VISITA',
flex: 1,
sortable: true,
align: 'right',
dataIndex: 'TipoVisita',
editor: {
xtype: 'combo',
allowBlank: true,
store: allTiposVisita,
valueField: 'Id',
name: 'TiposVisitaCombo',
itemId: 'TiposVisitaCombo',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{Designacao}</div>',
'</tpl>'),
displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '{Designacao}', '</tpl>')
}
},
What i would like to achivie is this.
When editing the row i would like that the selected value for the combo to be the value in the hidden field.
Is this even possible??
I've tried doing this: (on the combo)
value: Ext.ComponentQuery.query("#TipoVisitaID")[0] == null ? '' : Ext.ComponentQuery.query("#TipoVisitaID")[0].value
but it doesn't work...

Answer 1

Add a event listener to edit event on the grid and update data in your hidden field from there. This event will fire after edit is complete.
grid.on('edit', function (editor, e){
e.record.set('TipoVisitaID', e.value);
}

Answer 2

I've solved the problem.
{
text: 'TIPO VISITA',
flex: 1,
sortable: true,
align: 'right',
dataIndex: 'TipoVisitaID',
renderer: function (loader, response, active) {
return active.raw.TipoVisita;
},
editor: {
xtype: 'combo',
allowBlank: true,
store: allTiposVisita,
valueField: 'Id',
name: 'TiposVisitaCombo',
itemId: 'TiposVisitaCombo',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="x-boundlist-item">{Designacao}</div>',
'</tpl>'),
displayTpl: Ext.create('Ext.XTemplate', '<tpl for=".">', '{Designacao}', '</tpl>')
}
},
First i changed the dataIndex to the ID. But now the user would see the ID instead of the data, that's why i use the renderer so that the user sees the data and not the ID.
I then added the listener 'beforeedit' to the grid in which i did this:
Ext.ComponentQuery.query("#TiposVisitaCombo")[0].setValue(e.record.raw.TipoVisitaID);
Thus setting the value of the combo (making it the preselected one) with the ID.

Answer 3

Are you looking for something like this?
var theHidden = Ext.getCmp('TipoVisitaID');
var theCombo = Ext.getCmp('TiposVisitaCombo'); =
theCombo.on('change', function(combo, newValue, oldValue, e){
theHidden.setValue(newValue);
});