Blog

Ext4 define una nueva forma de crear clases, a mi parecer ahora es mucho más sencillo y claro de entender el funcionamiento, además de que con los nuevos pre-processors y post-processsors nos abren muchas posibilidades para la creación de nuestras clases.

Definición de una clase

Para crear una clase sencilla basta con utilizar el método “Ext.define” o “Ext.ClassManager.create” de la siguiente manera:

Ext.define(Nombre,Configuraciones,Callback);
Ext.ClassManager.create(Nombre,Configuraciones,Callback);

El primer parámetro define el nombre de la clase y debe ser un String.
El segundo parámetro define los miembros de la clase y debe ser un objeto con todas las propiedades y métodos que necesitemos en la nueva clase.
El tercer parámetro define una función (opcional) que se ejecuta cuando la clase se ha creado, esto es útil para cuando creamos clases que tienen que ser incluidas asíncronamente usando el Loader.

A continuación un ejemplo de la creación de una clase llamada User:

Ext.define("Bleext.training.User",{
username	: "",
password	: "",

login		: function(){
	console.log("Loging in....");
},

logout		: function(){
	console.log("Loging out....");
}
});

Hemos creado una clase en el namespace “Bleext.training” llamada “User”. A diferencia de Ext3, ahora definiremos el nombre y el namespace en el primer parámetro y ya no es necesario utilizar el tradicional Ext.ns que utilizabamos en la versión 3.

En el segundo parámetro es un objeto con dos propiedades y dos métodos, aquí podríamos definir lo que necesitemos.

Sobreescribiendo el contructor

En el ejemplo anterior no definimos un constructor de la clase, por lo tanto Ext le asigna un constructor vacio, si quisieramos definir uno tendríamos que usar la propiedad “constructor” de la siguiente manera.

Ext.define("Bleext.training.User",{
username	: "",
password	: "",

constructor	: function(options){
	Ext.apply(this,options || {});

	console.log("A new user!");
}

login		: function(){
	console.log("Loging in....");
},

logout		: function(){
	console.log("Loging out....");
}
});

La propiedad “constructor” es una configuración especial que (al igual que en Ext3) nos permite definir la función con la que se construirá el objeto que estamos definiendo, en este caso una llamada al metodo “Ext.apply” que únicamente copia el contenido del objeto “options” a la instancia que se creará, esto nos da la posibilidad de que a la hora de crear la instancia le asignemos valores a las propiedades definidas.

Creación de la instancia

Una vez que tenémos definida la clase podemos generar objetos a partir de esta, para eso es necesario invocar al método “Ext.create” o bien el método “Ext.ClassManager.instantiate” de la siguiente manera:

Ext.create(Clase,Opciones);
Ext.ClassManager.instantiate(Clase,Opciones);

Ambos métodos hacen exactamente lo mismo, el primer parámetro define la clase que se requiere instanciar (String) y el segundo parámetro es un objeto con las configuraciones que se le aplicarán a la instancia, por ejemplo:

var john = Ext.create("Bleext.training.User",{
	username	: "john",
	password	: "123"
});

console.log(john);

Al mandar imprimir a consola el objeto “john” veremos como las propiedades originales se sobre-escribieron con las configuraciones que le asignamos al crear la instancia.

Convenciones

No es una regla, pero si una convención nombrar la clase siguiendo el formato “camel case”, es decir de la siguiente manera:

UserPanel, UserGrid, UserForm, UserStore

También existe otra convención que nos recomienda escribir en “camel case” el objeto “raiz” de nuestro “namespace” y todos los paquetes en minúscula, de esta manera podremos diferenciar fácilmente entre clases y paquetes, por ejemplo:

Bleext.modules.security.roles.controller.Roles
Bleext.modules.security.roles.model.Role
Bleext.modules.security.roles.store.Roles
Bleext.modules.security.roles.view.RolesGrid
Bleext.modules.security.roles.view.RolePanel

Los anteriores son ejemplos de como se recomienda definir el nombre de nuestras clases, nótese cuan sencillo es diferenciar los “paquetes” de las clases.

Análisis del funcionamiento

Si lo notaste el objeto Ext.ClassManager es el responsable de la creación y manejo de las clases dentro del framework, este objeto hace varias cosas interesantes y vale la pena analizarlo a fondo para entender su funcionamiento.

En primer lugar cuando cuando creamos una clase usando “Ext.define” se realiza una llamada al método “Ext.ClassManager.create” el cual internamente crea una instancia de la clase “Ext.Class”, esto significa que todas las clases que definimos son instancias de “Ext.Class”.

Ext.Class define un proceso a la hora de instanciar las clases, en este proceso se ejecutan dos principales fases, la de “pre-procesamiento” y “post-procesamiento”, básicamente en estas fases podemos agregarle acciones, por defecto ya vienen varias, en la fase de pre-procesamiento encontramos las siguientes acciones:

extend,statics,inheritableStatics,mixins,config

Estas acciones permiten ejecutar porciones de código antes de que se cree la clase en manera secuencial, por ejemplo la acción “extend” lo que hace es copiar los prototipos de la superclase para realizar la herencia, la acción “statics” define de manera estática las propiedades o métodos que nosotros le definimos a la nueva clase y así sucesivamente se ejecutan los pre-procesadores de manera secuencial.

Más adelante en este mismo curso veremos a detalle cada una de esas acciones y como podemos agregar nuestros propios procesos.

Otro punto interesante es que por defecto (si no lo definimos) las clases que creamos heredan de la clase Ext.Base, esta clase define el funcionamiento abstracto para todas las clases, métodos como “callParent”, “initConfig” los podemos encontrar aquí, más adelante hablaremos a detalles de esto, pero es importante conocer que todas las clases heredan de “Ext.Base” ya sea directamente (si no definimos un super clase específica) o indirectamente (si heredamos de una clase ya existente).

Conclusión

Como hemos visto el sistema de clases esta muy completo y flexible, además la sintaxis para la creación de clases es bastante entendible, más adelante comenzaremos a ver más características del uso de clases como son los “mixins”, “configs”, “statics”, etc.

Si tienen alguna duda pueden consultar el foro y entre todos resolverla, los comentarios en el blog también son bien recibidos, no olviden compartir el artículo en twitter y sus redes favoritas, esto nos ayuda y nos anima a seguir compartiendo estos tutoriales de manera gratuita.