Mejores prácticas sobre initComponent() en Ext.define()

Question

Escribo todos mis componentes en la nueva MVC de ExtJS usando Ext.define().

Lucho un poco si define las propiedades dentro de initComponent() o simplemente configurándolas como property: 42,.

¿Existen buenas prácticas ampliamente aceptadas?

estoy escalonamiento entre el uso de initComponent() sólo cuando sea necesario (es decir. Cuando quiero algo dinámico o establecer un ámbito) que mantiene la función más corto y me ahorra algunos feos this. s y su uso siempre que tiene la ventaja, de que me Nunca tendré que mover propiedades anteriores a initComponent() solo porque quiero que sea más dinámico.

Desafortunadamente, los documentos de Sencha no dicen mucho sobre eso y los ejemplos disponibles parecen hacer lo que quieren.

Answer 1

la práctica personal, voy a declarar variables en el área de propiedades cuando las variables

• definir magnitud, como x, y, width, height
• variables que espera a ser anulado, o personalizable , como title, saveBtnTxt, url, fields, iconCls
• algunas constantes, que tendrán prefijos especiales por lo que no serán anulados tan fácilmente

entonces les declararé items, listeners, this.on, Ext.apply(me, {..}) o cualquier cosa que requiere el alcance de la obj (this, me), para sentarse dentro de mi initComponent. O cosas que deberían modificarse/anularse antes de que todo se configure para que el usuario no rompa mi componente anulando algunas de las variables importantes.

Por supuesto que me servirá de guía. 2 centavos

EDIT

Sobre la fea this, he utilizado la variable me ampliamente en mi aplicación, y se ve mucho más limpio que this. Me beneficia cambiar los ámbitos también con menos frecuencia.

Answer 2

No recibo su pregunta exactamente pero esto puede ser útil para usted.

Ext.define('My.Group', { 
// extend: 'Ext.form.FieldSet', 
xtype : 'fieldset', 
config : { 
    title : 'Group' + i.toString(), 
    id : '_group-' + i.toString() 

}, 
constructor : function(config) { 
    this.initConfig(config); 

    return this; 
},  
collapsible: true, 
autoScroll:true, 
..... 
}); 

puede usarlo de la siguiente manera.

handler : function() {      
     i = i + 1; 
     var group = new My.Group({ 
      title : 'Group' + i.toString(), 
      id : '_group-' + i.toString() 
     }); 
     // console.log(this); 
     // console.log(group); 
     Ext.getCmp('panelid').insert(i, group); 
     Ext.getCmp('panelid').doLayout(); 
    } 

Answer 3

Quiero agregar a la respuesta de Lionel que es mejor declarar configuración no primitiva en initComponent. (Por primitivo quiero decir cadena, booleano y número). Array y Object entran en initComponent.
Así definición debería tener este aspecto:

Ext.define('My.NewClass', { 
    extend: 'OldClass', 
    // here all primitive configs: 
    cls: 'x-my-cls', 
    collapsible: true, 
    region: 'west', 
    // and so on ... 

    initComponent: function() { 
    // here you declare non-primitive configs: 
    this.tbar = [/* blah-blah */]; 
    this.columns = [/* blah-blah */]; 
    this.viewConfig = {/* blah-blah */}; 
    // and so on ... 

    this.callParent(arguments); 
    } 

    // other stuff 
} 

La razón por la que debe poner todas las configuraciones no primitivos en InitComponent es que de lo contrario configuraciones de todos los casos se refieren a los mismos objetos. Por ejemplo, si define como NewClass:

Ext.define('My.NewClass', { 
    extend: 'OldClass', 
    bbar: Ext.create('Ext.toolbar.Toolbar', { 
    // ... 

bbar s de todos los casos se refieren al mismo objeto. Y, por lo tanto, cada vez que crea una nueva instancia, bbar desaparece de la instancia precedente.