classes - mixins javascript

Extjs: extender clase a través de constructor o initComponent?

Question

En extjs siempre puedes extender una clase extjs a través del constructor() . Para las clases derivadas de Component , también puede extenderse a través de initComponent() .

Me pregunto por qué tantos códigos se extienden a través de initComponent , mientras que el constructor parece ser el método de extensión universal. ¿ initComponent ofrece una clara ventaja sobre el constructor ?

Answer 1

Aquí hay algunas citas relevantes del libro de Jay Garcia ExtJS en acción:

initComponent se ejecuta dentro del constructor de la clase Component, pero solo después de que se hayan realizado algunas tareas de configuración cruciales para el Component. Estas tareas incluyen el almacenamiento en caché y la aplicación de las propiedades del objeto de configuración a la instancia de la clase

Y más tarde, y a la luz del constructor, donde los parámetros de configuración se aplican a la instancia:

si las instancias configuradas de la subclase alguna vez necesitarán ser clonadas a través de cloneConfig ... entonces extenderse a través del constructor es la mejor opción.

Por cierto, a pesar de que el libro de Jay trata sobre ExtJS 3, parece que cloneConfig sigue siendo relevante en ExtJS4; ver:

http://docs.sencha.com/ext-js/3-4/#!/api/Ext.Component-method-cloneConfig

y

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Component-method-cloneConfig

Answer 2

En primer lugar, la capacidad de anular a través de constructor se agregó en una versión posterior de Ext que initComponent , por lo que todos los códigos de cierta edad tendrían que usar initComponent. En estos días, usted todavía anularía initComponent si desea hacer algo después de que se llame al clase base initComponent (el constructor sería demasiado pronto para esto), pero antes de que se represente el componente. En muchos casos (como la configuración de configuración más común), prácticamente no importa de ninguna manera y la mayoría de las personas hace lo que es más conveniente. Sin embargo, hay algunos casos donde importa.

Answer 3

Permítanme probar una respuesta actualizada en términos de ExtJS versiones 4.0-4.2 y posteriores.

El constructor() es el objeto / clase antes del método de creación . Y initComponent() es el componente antes del método show .

constructor: function(config) {
  // ctor #1 - insert code here to modify config or run code to inject config
  // probably the cheapest place to make changes - before anything has been built

  this.callParent(arguments);

  // ctor #2 - insert code here if you need to make changes 
  // after everything has been rendered and shown, IIUC
},
initComponent: function() {
  // this function runs between ctor #1 and ctor #2

  // initComponent #1 - the UI component object tree is created,
  // (this object and child objects from config { items: [{...}]})
  // but they have not yet been rendered to DOM or shown.

  this.callParent(arguments);

  // initComponent #2 - I believe this is equivalent to ctor #2, 
  // I would prefer ctor as it is more universal.
}

Paneles con elementos secundarios o diseño complejo, probablemente necesite utilizar initComponent, ya que deberá inspeccionar y manipular los componentes (el gráfico de objetos de la interfaz de usuario).

Pero para los elementos de formulario individuales (cuadro combinado, botón, etc.) me quedo con el constructor, que creo que es más ligero (antes de que cualquier construcción de objeto complejo o DOM cambie) y es más universal. Los constructores IOW se pueden usar para interfaces de usuario, modelos y almacenes de datos simples; los dos últimos no pueden usar initComponent.

Entonces solo uso initComponent cuando hay una razón para hacerlo. A menudo, cuando escribo una función initComponent estoy tratando de manipular objetos de UI secundarios, y mi próximo paso es extraer ese control secundario en su propio Ext.define (), mover el código personalizado para ejecutarlo en la clase de control secundario, que elimina el init complejo del panel principal. Este proceso lo he repetido 4 veces en mi última página.