extjs
Errores comunes y mejores prácticas

Separación de intereses

Peor

ViewController:

// ...
myMethod: function () {
    this.getView().lookup('myhappyfield').setValue(100);
}
//...

Ver:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
]
//...

Mejor

ViewController:

// ...
myMethod: function () {
    this.getView().setHappiness(100);
}
//...

Ver:

//...
items: [
    {
        xtype: 'textfield',
        reference: 'myhappyfield'
    }
],
setHappiness: function (happiness) {
    this.lookup('myhappyfield').setValue(happiness);
}
//...

Explicación

En este ejemplo, los dos fragmentos de código realizan la misma tarea. Sin embargo, en el caso de que la referencia a myhappyfield cambie o la metodología para myhappyfield cambios de "felicidad" de manera significativa, el enfoque anterior requiere cambios en cada lugar donde se usa la referencia.

Con preocupaciones separadas (el último ejemplo), la vista proporciona una forma abstracta de modificar la "felicidad" que otras clases pueden usar. La consulta y la manipulación de componentes se guardan en un solo lugar (¡justo al lado de la definición de la vista en sí misma!) Y las llamadas al método abstraído no necesitan cambiar.

Si bien es posible que un controlador permita realizar consultas a través de las capas de una vista, es muy recomendable abstraer ese comportamiento en los métodos de la vista. De esta manera, una vista puede proporcionar formas estandarizadas para que otras clases influyan en ella y minimicen o eliminen los cambios en otras clases cuando cambia la estructura de una vista.

Extender vs Override

Anulaciones:

Reemplazar archivo:

Ext.define('MyApp.override.CornField',
    override: 'Ext.form.field.Text',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Usar en la aplicación:

{
    xtype: 'textfield'
}

Extensiones:

Reemplazar archivo:

Ext.define('MyApp.form.field.CornField',
    extend: 'Ext.form.field.Text',
    alias: 'widget.cornfield',
    initComponent: function () {
        this.callParent(arguments);
        this.setValue('Corn!');
    }
);

Usar en la aplicación:

{
    xtype: 'cornfield'
}

Explicación

ExtJS proporciona dos formas principales de cambiar el comportamiento de las clases existentes: extenderlas y anularlas. Cada uno tiene beneficios y dificultades que deben considerarse antes de usarlos.

Extender una clase crea una nueva clase que hereda su comportamiento y configuración de su padre. Al crear una nueva clase a través de la extensión, se pueden realizar cambios repetidos de configuración y comportamiento en una ubicación central y reutilizarlos en toda la aplicación. La mayor ventaja de la extensión es que la clase principal permanece intacta y disponible para casos de uso más simples donde no se desea el comportamiento extendido.

Los ejemplos de casos de buen uso para extensiones incluyen campos de formulario personalizados con comportamiento especial, modales especializados y componentes personalizados en general.

La anulación de una clase modifica el comportamiento de una clase existente en su lugar. La configuración y los métodos en los reemplazos reemplazan a sus contrapartes de la clase principal por completo, creando nuevas configuraciones y comportamientos predeterminados que llenan toda la aplicación. Las anulaciones deben usarse con moderación debido a la naturaleza destructiva de su uso; una clase extendida normalmente puede proporcionar los mismos beneficios mientras deja la clase principal sin ser molestada.

Sin embargo, las anulaciones pueden proporcionar beneficios en algunas situaciones. Los casos de buen uso incluyen corregir errores en clases existentes, modificar el comportamiento del proxy para agregar información adicional a las solicitudes, como un token o datos de sesión, y generalmente obligar a un comportamiento específico a ser el comportamiento predeterminado en una aplicación.

Anulaciones separadas de correcciones de errores

En ExtJS, puede anular casi cualquier método del marco y reemplazarlo por el suyo. Esto le permite modificar las clases existentes sin modificar directamente el código fuente de ExtJS.

A veces, es posible que desee mejorar una clase existente o proporcionar una propiedad predeterminada sana en una clase.

Por ejemplo, es posible que desee que todos los campos de datos de su modelo permitan valores nulos.

Ext.define('MyApp.override.DataField', {
  override: 'Ext.data.field.Field',
  allowNull: true
});

En otros casos, tendrá que arreglar algo que está roto en el marco.

Aquí hay un ejemplo de una corrección de errores con documentación. Tenga en cuenta que el nombre de clase contiene "corregir" en lugar de "anular". El nombre real no es importante, pero la separación sí lo es.

Ext.define('MyApp.fix.FieldBase', {
  override: 'Ext.form.field.Base',
  /**
   * Add a description of what this fix does.
   * Be sure to add URLs to important reference information!
   *
   * You can also include some of your own tags to help identify
   * when the problem started and what Sencha bug ticket it relates to.
   *
   * @extversion 5.1.1
   * @extbug EXTJS-15302
   */
  publishValue: function () {
    this.publishState('value', this.getValue());
  }
});

Ahora, cuando llega el momento de actualizar a la próxima versión de ExtJS, solo hay un lugar donde debe verificar para ver cuáles de sus correcciones de errores se pueden eliminar.