Herencia, constructor vs initComponent
Buen día foreros, he aquí una más de mis preguntas.
Escenario: Verán, en mi aplicación requiero de varias grillas editables. Algunas de estas grillas tienen en común algunas cosas, como un TextItem para una barra de información y tres columnas que se repiten en varias grillas, donde pueden ser acompañadas por otras columnas.
Bien, el caso es que no quiero repetir código. Así que he tratado de poner esos elementos comunes en una clase base, y luego extender dicha clase para agregar las cosas específicas. Pero me he perdido en el camino y he terminado más confundido de lo que estaba en el principio. Incluso, ahora no sé bien cuales son las ventajas y desventajas de utilizar contructor o initComponent para heredar las clases.
Bueno, tal vez con un poco de código me doy a entender mejor:
//Quiero extender un EditorGridPanel:
Mld.grid.MyBaseEditorPanel = Ext.extend(Ext.grid.EditorCellGridPanel, {
//hay dos columas que siempre se evalúan igual, no importa la grilla que los use:
listeners: {
afteredit: function(e){
if(e.field == 'column_data_index'){ /** hacer lo mismo después de editar esta columna */ }
}
},//Fin de listeners
initComponent: function(){
//Se que esto es lo que debo cambiar, pero me he perdido en el como:
this.cm = new Ext.grid.ColumnModel([
{header: 'Texto 1', dataIndex: 'column_data_index', editor: new Mld.grid.MyColumnEditor() },
//Más columas comunes
]);
this.store = new Mld.data.Store({
//Este Store está personalizado y funciona bien.
reader: new Ext.data.XmlReader({/*El reader de las columnas definicas en el cm más dos campos ocultos*/})
});
//Luego quiero poner una barra de información que en este punto sólo ocupa un elemento:
this.tbDescription = new Ext.Toolbar.TextItem();
this.bbar = new Ext.Toolbar({items:['Descripción:', this.tbDescription]});
Mld.grid.MyBaseEditorPanel.superclass.initComponent.call(this);
}
});
Esa es mi base, pero no es realmente adecuada para lo que necesito, y mis experimentos no han ido bien, pero bueno, ahora os pongo un ejemplo de mi clase personalizada:
Mld.grid.MyNewEditorPanel = Ext.extend(Mld.grid.MyBaseEditorPanel, {
//nuevos atributos y más listeners:
listeners: {
beforeedit: function(e){/*esto es nuevo y sólo para esta grilla*/},
afteredit: function(e){
//Llamo al afetredit de la base
Mld.grid.MyNewEditorPanel.superclass.listeners.afteredit.call(this, e);
}
}
//Ahora de nuevo el initComponent:
initComponent: function(){
//Empiezo por redefinir el cm, pero no quiero volver a escribir las columas comunes, no obstante en ese momento lo hago =/
this.cm = new Ext.grid.ColumnModel({/*la nueva definición*/});
this.store = new Mld.data.Store({/*Mismo caso que con el cm*/});
//El siguiente punto es que ocupo personalizar la barra de información, porque esta ya lleva más items
this.tbNewItem = Ext.Toolbar.TextItem();
//Aquí es donde las cosas me da error:
Mld.grid.MyNewEditorPanel.superclass.initComponent(this);
this.bbar = Ext.Toolbar({items: [this.tbDescripcion, this.tbNewItem]});
}
});
De cierta forma el objeto se construye, pero no me muestra la barra de información (osea que no funciona el bbar y no entiendo porqué :P )
También he obtenido el error "e is undefined".
Recuerda que "initComponent" solo se ejecuta cuando la clase que extiendes hereda de "Ext.Component", en cambio el constructor siempre se ejecuta.
Saludos
¿Conoces a alguien que pueda responder esta pregunta? Comparte el link en Twitter o Facebook
Es necesario registrarse para poder participar en el foro! Si ya tienes una cuenta puedes entrar y comentar en este foro.