Use MVC to manage grid column events - extjs

Question

I have a grid with some columns(combobox columns) which I need to manage their change events. I want to do it from a controller. The goal is to send the server the selected combo id when i need to insert or update the row and update the other columns depending of the value of this selected combo. Could you give me an example how I much do this?
I have 2 hidden columns which must be updated when the Combo Empresa and Camion changes with the id.
This is my grid def:
{
xtype: 'gridpanel',
id: 'grdListaFichaEmbarques',
minWidth: 1024,
autoScroll: true,
title: 'Listado de Fichas',
store: 'ListaFichasTransporte',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
pluginId: 'ListaFEPlugin'
})
],
columns: [
{
xtype: 'numbercolumn',
dataIndex: 'NumEmbarque',
text: 'NumEmbarque'
},
{
xtype: 'gridcolumn',
dataIndex: 'Empresa',
text: 'Empresa',
editor: {
xtype: 'combobox',
allowBlank: false,
displayField: 'Nombre',
hiddenName: 'Id',
store: 'ListaEmpresa',
valueField: 'Id'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Contacto',
text: 'Contacto'
},
{
xtype: 'gridcolumn',
dataIndex: 'Celular',
text: 'Celular'
},
{
xtype: 'gridcolumn',
dataIndex: 'Placa1',
text: 'Placa1',
editor: {
xtype: 'combobox',
allowBlank: false,
displayField: 'Placa1',
store: 'ListaCamiones',
valueField: 'Id'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Placa2',
text: 'Placa2'
},
{
xtype: 'gridcolumn',
dataIndex: 'Capacidad',
text: 'Capacidad'
},
{
xtype: 'gridcolumn',
dataIndex: 'Chofer',
text: 'Chofer'
},
{
xtype: 'gridcolumn',
dataIndex: 'Nextel',
text: 'Nextel'
},
{
xtype: 'gridcolumn',
dataIndex: 'CelularPeru',
text: 'CelularPeru'
},
{
xtype: 'gridcolumn',
dataIndex: 'CelularEcuador',
text: 'CelularEcuador'
},
{
xtype: 'gridcolumn',
dataIndex: 'Termoregistro1',
text: 'Termoregistro1'
},
{
xtype: 'gridcolumn',
dataIndex: 'Termoregistro2',
text: 'Termoregistro2'
},
{
xtype: 'gridcolumn',
dataIndex: 'PuntoRecojo',
text: 'PuntoRecojo',
editor: {
xtype: 'combobox',
displayField: 'Nombre',
store: 'ListaOrigenDestino',
valueField: 'Id'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraLlegadaOrigen',
text: 'FechaHoraLlegadaOrigen',
editor: {
xtype: 'datefield',
format: 'd/m/Y h:i:s',
submitFormat: 'd/m/Y h:i:s'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraDespachoOrigen',
text: 'FechaHoraDespachoOrigen',
editor: {
xtype: 'datefield',
format: 'd/m/Y h:i:s',
submitFormat: 'd/m/Y h:i:s'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraLlegadaTumbes',
text: 'FechaHoraLlegadaTumbes',
editor: {
xtype: 'datefield',
format: 'd/m/Y h:i:s',
submitFormat: 'd/m/Y h:i:s'
}
},
{
xtype: 'gridcolumn',
dataIndex: 'PuntoLlegadaEcuador',
text: 'PuntoLlegadaEcuador',
editor: {
xtype: 'combobox',
displayField: 'Nombre',
store: 'ListaOrigenDestino',
valueField: 'Id'
}
},
{
xtype: 'datecolumn',
dataIndex: 'FechaHoraLLegadaDestinoEcuador',
text: 'FechaHoraLLegadaDestinoEcuador',
editor: {
xtype: 'datefield',
format: 'd/m/Y h:i:s',
submitFormat: 'd/m/Y h:i:s'
}
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'IdEmpresa',
text: 'IdEmpresa'
},
{
xtype: 'numbercolumn',
hidden: true,
dataIndex: 'IdCamion',
text: 'IdCamion'
}
]
}
This is my Controller:
Ext.define('Fplweb2.controller.FichaEmbarque', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'GrillaFE',
selector: 'grid[id=grdListaFichaEmbarques]',
xtype: 'Ext.grid.Panel'
}
],
onButtonClick: function(button, e, eOpts) {
this.save();
},
onComboboxSelect: function(combo, records, eOpts) {
var grid = this.getGrillaFE();
var store = grid.getStore();
//HERE I WAS TRYING TO UPDATE THE COLUMNS
if( grid.getSelectionModel().hasSelection() )
{
var row = grid.getSelectionModel().getSelection();
var srow;
for(var i=0; i<store.count(); i++)
{
srow = store.getAt(i);
if(srow.get('NumEmbarque') == row[0].data.NumEmbarque)
{
console.log("ASIGNARA");
srow.IdEmpresa = records[0].data.Id;
srow.Contacto = records[0].data.Contacto;
srow.Celular = records[0].data.Celular;
}
}
}
},
init: function(application) {
this.listen({
controller: {},
component: {
'grid[xtype=gridpanel]': {
edit: this.save,
canceledit: this.cancel
}
});
this.control({
"button[id=btnFichaEmbarqueAgregar]": {
click: this.onButtonClick
},
"combobox[id=cmbGrdListaFichaEmbarquesEmpresa]": {
select: this.onComboboxSelect
}
});
},
save: function() {
var fechaact = new Date();
var grid = this.getGrillaFE();
var plugin = grid.editingPlugin;
var store = grid.getStore();
//SET THE FIRTS COMBO VALUE
//Combo Lista Empresas
var lestore = Ext.data.StoreManager.lookup('ListaEmpresa').getAt(0).get('Nombre');
//Combo Lista Origen - Destino
var odstore = Ext.data.StoreManager.lookup('ListaOrigenDestino').getAt(0).get('Nombre');
//Combo Lista Camiones
var lcstore = Ext.data.StoreManager.lookup('ListaCamiones').getAt(0).get('Placa1');
plugin.cancelEdit();
var r = Ext.create('Fplweb2.model.ListaFichasTransporte', {
NumEmbarque: store.getCount() + 1,
Empresa: lestore,
Contacto: 'Nuevo Contacto',
Celular: '999999999',
Placa1: lcstore,
Placa2: '',
Capacidad: '',
Chofer: 'Nuevo Chofer',
Nextel: '999999999',
CelularPeru: '999999999',
CelularEcuador: '999999999',
Termoregistro1: '',
Termoregistro2: '',
PuntoRecojo: odstore,
FHTranspPuntoRecojo: fechaact,
FHDespaPuntoRecojo: fechaact,
FHLlegadaTumbes: fechaact,
PuntoLlegadaEcuador: odstore,
FHLlegadaPuntoEcuador: fechaact
});
store.insert(0, r);
plugin.startEdit(0, 0);
store.sync();
},
cancel: function(editor, context, eOpts) {
console.log("cancelo");
var grid = this.getGrillaFE();
var plugin = grid.editingPlugin;
var store = grid.getStore();
plugin.cancelEdit();
store.removeAt(0);
if( context.record.phantom ) {
context.store.remove( context.record );
}
}
});
I want to do this FROM a controller.
Thanks in advance...

Answer 1

You need to catch the edit event of the grid (added by the editing plugin):
listeners: {
edit: function(editor, e) {
if (e.field === 'Empresa') {
// do a trip to the server if needed
// or update your column locally
e.record.set('IdCamion', e.value);
}
}
}