Extjs 使用MVC管理网格列事件
我有一个带有一些列（组合框列）的网格，我需要这些列来管理它们的更改事件。我想从控制器上做。目标是在需要插入或更新行时向服务器发送所选组合id，并根据所选组合的值更新其他列。你能给我举个例子，我是如何做到这一点的吗 我有两个隐藏列，当组合Empresa和Camion随id更改时必须更新 这是我的网格定义：Extjs 使用MVC管理网格列事件,extjs,combobox,grid,Extjs,Combobox,Grid,我有一个带有一些列（组合框列）的网格，我需要这些列来管理它们的更改事件。我想从控制器上做。目标是在需要插入或更新行时向服务器发送所选组合id，并根据所选组合的值更新其他列。你能给我举个例子，我是如何做到这一点的吗 我有两个隐藏列，当组合Empresa和Camion随id更改时必须更新 这是我的网格定义： { xtype: 'gridpanel', id: 'grdListaFichaEmbarques
{
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'
}
]
}
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 );
}
}
Ext.define（'Fplweb2.controller.FichaEmbarque'{
扩展：“Ext.app.Controller”，
参考文献：[
{
裁判：“格里拉菲”，
选择器：“栅格[id=grdListaFichaEmbarques]”，
xtype:'Ext.grid.Panel'
}
],
onButtonClick：功能（按钮、e、eOpts）{
这是save（）；
},
OnComboxSelect：函数（组合、记录、EOPT）{
var grid=this.getGrillaFE（）；
var store=grid.getStore（）；
//在这里，我试图更新列
if（grid.getSelectionModel（）.hasSelection（））
{
var row=grid.getSelectionModel（）.getSelection（）；
var srow；
对于（var i=0；i您需要捕获网格事件（由编辑插件添加）：
我在行编辑中添加了，并放置了一个console.log（）以查看何时传递此事件，但控制台从不显示任何内容。如何从控制器执行此操作？
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);
}
}
}