Ext JS 4 intenta solucionar este problema y definir una arquitectura para que todos los desarrolladores (que así deseen hacerlo) escriban de la misma manera sus aplicaciones, uno de los principales beneficios de hacer esto es que podremos compartir código de una manera mucho más sencilla, además de que nuestro código esta mucho mejor organizado.

Definiendo la aplicación

Cuando iniciemos a desarrollar nuestro proyecto, lo primero que debemos realizar es crear una “aplicación”, esto es un concepto nuevo en Ext 4 y lo hacemos de la siguiente manera:

Ext.application({
	name	: "Bleext",
	launch	: function(){
		console.log("Application created!");
	}
});

El código anterior creó una instancia de la clase “Ext.app.Application”, la configuración “name” define el nombre de la aplicación que estamos creando, este nombre lo debemos usar como el “namespace” para las clases que definamos.

Otro aspecto importante a considerar en el código anterior es que el contenido de la propiedad “name” se agrega al “path” del loader donde por defecto define el directorio “app” para alojar nuestras clases, internamente haría algo como esto:

Ext.Loader.setPath(“Bleext”,”app”);

Si quisieramos cambiar la ubicación por defecto del directorio donde se lojarán nuestras clases tendríamos que definir la propiedad “appFolder” de la siguiente manera:

Ext.application({
	name		: "Bleext",
	appFolder 	: "js/Bleext",
	launch		: function(){
		console.log("Application created!");

	}
});

Con la configuración anterior definimos que alojaremos nuestras clases en el directorio “js/Bleext”.

La función “launch” se ejecuta cuando el DOM está listo y cuando cuando se han cargado las clases necesarias para arrancar nuestra aplicación, dentro de esta función podríamos crear la instancia del viewport e inicializar toda la parte visual de nuestro proyecto.

Event Bus

Es importante mencionar que únicamente podemos tener una sola instancia de la clase “Ext.app.Application”, no debemos intentar crear más de una ya que tendremos resultados inesperados con respecto al manejo de eventos.

Internamente la clase “Ext.app.Application” sobre-escribe la manera como se disparán los eventos en los componentes y crea un “Bus” de eventos (Ext.app.EventBus) que estará escuchando absolutamente todos los eventos que sucedan en los componentes, esto para poder delegar las acciones correspondientes a determinado evento al controlador que lo solicite, en el siguiente tutorial veremos el método “control” y como utilizarlo desde un controlador para capturar los eventos de las vistas.

Ahora bien, para poder utilizar el patrón MVC que sencha nos ha propuesto forzosamente necesitamos crear una aplicación para luego usar los controlers que consultarán al “event bus” para la delegación de eventos.

Conclusión

Usar el paquete de “aplicaciones” de Ext 4 es de mucho beneficio, hoy vimos el primer paso para poder iniciar a escribir aplicaciones usando el patrón MVC, recuerden seguirnos en twitter para estar pendientes de nuestro siguiente tutorial que será acerca de los controladores y como interactuar con las vistas.

Ya hablé acerca de las convenciones que deberíamos seguir para poder usar de una manera muy sencilla el Ext.Loader, el día de hoy mostraré cómo utilizarlo en nuestro propio proyecto.

Configurar los Paths

En primer lugar debemos definir el lugar donde estarán ubicadas nuestras clases, en lenguajes como Java existe algo denominado “classpath” en el cual existen las clases que creamos, en Ext4 existe un concepto semejante y para definir el “path” lo hacemos de la siguiente manera:

Ext.Loader.setConfig({
	enabled	: true,
	paths	: {
		Bleext	: "js/Bleext"
	}
});

En el código anterior lo que hicimos es habilitar el Loader y asignarle un path, ahora bien cada que carguemos una clase cuyo namespace principal sea “Bleext”, entonces buscará el archivo dentro de la carpeta “js/Bleext”.

También podemos definir más paths, por ejemplo:

Ext.Loader.setConfig({
	enabled	: true,
	paths	: {
		Bleext	: "js/Bleext",
		CRM	: "js/Crm"
	}
});

Cargar clases dinámicamente

Primero que nada vamos a crear la clase para después poderla cargar, si recordamos, una de las convenciones es que el nombre del archivo debe llamarse igual que la clase, además el archivo debe estar ubicado de acuerdo al namespace asignado, por lo tanto creamos un archivo en “js/Bleext/training/UsuarioPanel.js” y dentro definiremos la clase de la siguiente manera:

Ext.define("Bleext.training.UsuarioPanel",{
	extend		: "Ext.panel.Panel",

	title		: "User",
	width		: 300,
	height		: 250,

	initComponent	: function() {
		var me = this;

        me.html = "This is Jhon Doe!";

		me.callParent();
	}
});

La clase anterior extiende del panel y simplemente le agrega un título, dimensiones y contenido, realmente no hace nada útil pero nos servirá de ejemplo.

Lo siguiente es cargar la clase e instanciarla de la siguiente manera:

//cargar la clase de manera dinámica
Ext.require("Bleext.training.UsuarioPanel");

Ext.onReady(function(){
	var john = Ext.create("Bleext.training.UsuarioPanel",{
		renderTo	: Ext.getBody()
	});

	john.center();
});

Este código va dentro del archivo app.js que creamos al inicio donde ya tenemos configurado el Loader con los paths.

Por último es necesario crear el HTML donde se incluye la librería de Ext4 y el archivo app.js que ya hemos creado.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>ExtJS Loader</title>
	<link rel="stylesheet" href="../common/js/Ext/resources/css/ext-all.css" type="text/css" media="screen" title="no title" charset="utf-8">
	<script src="../common/js/Ext/ext-all-dev.js" type="text/javascript" charset="utf-8"></script>

	<script src="js/app.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>

</body>
</html>

Al ejecutar el ejemplo en el navegador veremos un lindo panel en el centro de la pantalla, como se muestra en la siguiente imágen.

Using the Loader

Cargar solo las clases necesarias de Ext

Hasta ahora hemos cargado la librería completa de Ext JS, pero muchas veces no utilizamos todos los componentes de la librería y quizás no vale la pena cargarla toda, para esos casos podemos cargar solo aquellos componentes que requerimos, para eso necesitamos utilizar el archivo “ext-dev.js” en lugar del “ext-all-dv.js”.

<!-- borramos esta linea en el HTML -->
<script src="../common/js/Ext/ext-all-dev.js" type="text/javascript" charset="utf-8"></script>

<!-- insertamos esta linea en el HTML -->
<script src="../common/js/Ext/ext-dev.js" type="text/javascript" charset="utf-8"></script>

El archivo ext-dev.js unicamente contiene las clases necesarias para cargar clases bajo demanda, además contiene algunas otras utilerías.

Si en este momento actualizamos el navegador donde tenemos el ejemplo nos ocurrirá un error, diciendonos que no puede cargar la clase correctamente “Failed loading ‘src/panel/Panel.js’, please verify that the file exists”.

We need to set the correct path

Esto sucede porque necesitamos indicar el path donde se encuetra la librería, en este caso yo la tengo ubicada dentro de una carpeta que se llama “common/js/Ext”, ahi existe una carpeta llamada “src” donde están todas las clases separadas por archivo, es allí donde debemos apuntar para que la carga se realice correctamente, para eso modificamos el archivo “app.js” y agregamos el nuevo path de la siguiente manera:

Ext.Loader.setConfig({
	enabled	: true,
	paths	: {
		Ext	: "../common/js/Ext/src",
		Bleext	: "js/Bleext",
		CRM	: "js/Crm"
	}
});

Ahora si veremos el ejemplo correctamente, y si abrimos la consola podremos ver todos los archivos que se han cargado de manera dinámica.

Loading too many classes

Seguramente notarás que se ha renderizado más lento el panel cuando cargamos las clases de manera dinámica, esto es por que se están descargando varios archivos, lo ideal es crear una versión de Ext con sólo las clases que usamos y comprimirlo en un solo archivo para evitar descargar todas las clases por separado, esto sería lo ideal. Más adelante mostraré como crear la versión de Ext personalizada ya que eso requiere un tutorial por separado.

Conclusión

En este tutorial vimos como configurar el loader y cargar clases de manera dinámica, también se mostró como cargar las clases de la propia librería de Ext, es importante mencionar que esto es ideal para desarrollar, cuando se despliegue en producción es recomendable generar un solo archivo comprimido con la versión de Ext, así mismo hacer paquetes comprimidos donde vengan todas las clases de los módulos que contendrá nuestra aplicación, en futuros tutoriales hablaré más con respecto al Loader ya que faltan algunas otras cosas por cubrir.

Recuerda que si tienes dudas puedes consultar el foro, además recuerda seguirnos en twitter y facebook para estar al tanto de las actualizaciones y nuevos tutoriales.

A continuación se listan las convenciones a tomar en cuenta cuando definimos una clase.

Clases y archivos con el mismo nombre

Cuando intentamos cargar una clase lo hacemos por su nombre, es por esto que es de suma importancia que tanto el nombre de la clase como del archivo sean idénticos. Es decir, si creamos una clase llamada “User” debemos crear un archivo llamado “User.js” donde este el código de la clase.

// User.js
Ext.define("User",{
    name  : "John"
});

Usar “Camel case” para los nombres de clases

Se recomienda el uso de “camel case” para definir el nombre de las clases, esto nos permitirá fácilmente diferenciar entre una clase y un paquete, ej: User, Role, UserRole.

Ext.define("UserView",{
    name  : "John",
    // ...
});

Ext.define("UserGrid",{
    name  : "John",
    // ...
});

Espacio de nombres en minúsculas

Los paquetes deberíamos nombrarlos en minúsculas para diferenciar fácilmente entre clases y paquetes:

Ext.define("Bleext.users.controller.UserController",{
    // ...
});

Ext.define("CRM.security.groups.view.GroupsGrid",{
    // ...
});

Paquetes como carpetas

Normalmente cuando creamos una clase la definimos dentro de un “namespace” (si aún no lo haces: hazlo!!), se recomienda que por cada punto exista una carpeta física, por ejemplo, si tenemos una clase llamada “Bleext.users.controller.UserController” debería existir un archivo en la ruta “Bleext/users/controller/UserController.js”, esto es de suma importancia para que funcione correctamente el Loader.

// Bleext/users/controller/UserController.js
Ext.define("Bleext.users.controller.UserController",{
    // ...
});

// CRM/security/groups/view/GroupsGrid.js
Ext.define("CRM.security.groups.view.GroupsGrid",{
    // ...
});

Evitar uso de numeros en los nombres

Se recomienda evitar el uso de número en los nombres de paquetes o clase, nombres como Users4Roles, Class2 y semejantes deberían ser evitados, procuremos asignar nombres con significado y debidamente empaquetados. Evitar el uso de acrónimos en las clases también es recomendable.

Pero siempre hay una excepción a la regla, ya que hay algoritmos como por ejemplo MD5 o SH4 que podemos usar para nombrar una clase, así mismo los acrónimos como Http pueden ser usados de ser necesario.

Evitar el uso de guiones

Se recomienda evitar usar el guión (_) para separar palabras en el nombre de una clase o paquete, User_Role, User_Grid son ejemplos de nombres que debemos evitar usar.

//evitar esto
Ext.define("Bleext.users.controller.User_Controller",{
    // ...
});

Estás son convenciones, nadie está obligado a seguirlas pero si la seguimos podremos utilizar el Loader de una manera muy sencilla, en el siguiente tutorial hablaré al respecto, un tema muy interesante y útil para cargar dinámicamente clases.

Uso de configuraciones

Es común que cuando creamos clases se definan configuraciones para estas, normalmente servirán para modificar el comportamiento de la clase o posiblemente para modificar el aspecto visual del componente.

En versiones anteriores, las configuraciones las definiamos como propiedades de la clase, y estas se sobre escribian cuando se creaba alguna instancia, en ExtJS 4 se ha introducido una propiedad llamada “config”, el cual es un objeto que esta pensado para alojar todas las configuraciones que se necesiten en una clase.

Ext.define("Bleext.desktop.User",{
	config	: {
		name	: "John",
		lastname: "Doe"
	},

	constructor	: function(options){
		this.initConfig(options);
	}
});

Dentro del objeto “config” podemos agregar cualquier cantidad de propiedades que serán usadas como configuraciones, esto nos permite mantener agrupadas las configuraciones mejorando la organización de nuestro código.

Otro aspecto importante es que en el constructor se están inicializando las configuraciones, mediante el parámetro “options” podemos inicializar las configuraciones para cada instancia que creamos.

var john = Ext.create("Bleext.desktop.User",{
	name	: "Susan"
});

console.log(john.getName());

john.setName("Mary");

console.log(john.getName());

En el código anterior creamos una instancia de la clase “User” y sobre escribimos la configuración “name” asignandole “Susan”, más adelante podemos hacer uso de los getters y setters que se crean automáticamente para cada configuración, por ejemplo “getName” y “setName”.

Definiendo propiedades y métodos estáticos

Para definir una propiedad como estática únicamente es necesario usar la propiedad “statics” y asignarle un objeto con todos los métodos y propiedades que pertenecerán a la clase y no a la instancia.

Ext.define("Bleext.desktop.User",{
	config	: {
		name	: "John",
		lastname: "Doe"
	},
//Propiedades que se agregarán a la clase y no a las instancias
	statics		: {
		VISITANTE		: 1,
		USUARIO			: 2,
		ADMINISTRADOR	: 3
	},

	constructor	: function(options){
this.initConfig(options);
	}
});

En el ejemplo anterior definimos tres propiedades, estas propiedades existirán únicamente en la clase y no es necesario crear instancias para invocarlas.

console.log(Bleext.desktop.User.VISITANTE);
console.log(Bleext.desktop.User.USUARIO);
console.log(Bleext.desktop.User.ADMINISTRADOR);

Singleton

Por definición una clase “singleton” es aquella que no se puede tener más de una instancia de la misma, en Ext JS 4 para definir una clase de este tipo basta con agregar la propiedad “singleton” igual a true.

Ext.define("Bleext.desktop.Constants",{
	singleton	: true,

	LOGIN_URL	: "/login.do",
	LOGOUT_URL	: "/logout.do",

	GET_USERS_URL	:  "/users/all",
	GET_USER_URL	: "/users/get"
});

console.log(Bleext.desktop.Constants.GET_USERS_URL);

La clase anterior no necesita ser instancia para poder usarse, basta con acceder a sus miembros directamente. Ahora bien, si por alguna razón quisieramos crear una instancia de esa clase recibiriamos un error al intentarlo.

//'Bleext.desktop.Constants' is a singleton and cannot be instantiated
Ext.create("Bleext.desktop.Constants");

Esto sucede porque las clases singleton no se pueden instanciar por definición.

Conclusión

En este tutorial se describe brevemente tres características nuevas en el sistema de clases que introduce Ext4, vemos que es mucho más claro que en versiones anteriores realizar ciertas tareas (como clases singleton o configuraciones), normalmente los singleton se utilizan para manejar las “Constantes” de una aplicación o cualquier otra circustancia donde se requiera una sola instancia de una clase.

Definiendo el xtype

Si has trabajado con la versión 3 de ExtJS ya sabrás lo que significa el xtype, pero en pocas palabras el xtype es un alias para definir componentes en de manera literal, por ejemplo:

Ext.define("Bleext.training.Teacher",{
	extend 	: "Ext.panel.Panel",
	alias		: "widget.teacher"

	// ...
});

En la clase anterior usamos la propiedad “alias” para definir el xtype de la clase, a diferencia de Ext3 en esta versión se le asigna un prefijo, este prefijo es “widget” para el caso de cualquier clase que herede directa o indirectamente de “Ext.Component”, existen varios prefijos para los diferentes componentes que existen dentro del framework.

Prefijos en el xtype

Para identificar cuales prefijos están disponibles podemos ejecutar el siguiente código:

var prefix = {},
	values = [];

Ext.Object.each(Ext.ClassManager.maps.aliasToName,function(key,value){
	var px = key.split(".")[0];

	if(!prefix[px]){
		prefix[px] = px;
		values.push(px);
	}
});
console.log(values);

La clase “ClassManager” es la responsable de la creación de clases, es por eso que aquí están definidos los “alias” de todas las clases que existen en el framework. El resultado del código anterior es lo siguiete:

[layout,writer,data,reader,proxy,widget,axis,store,series,association,direct,state,formaction,feature,editing,plugin,selection]

Básicamente el prefijo sirve para agrupar las clases, de esta manera podemos tener un xtype “store.teacher” y otro “widget.teacher”, la diferencia es el prefijo.

Creando la clase mediante su xtype

Una vez definida la clase y asignado su alias con su respectivo prefijo, podemos instanciar la clase usando el xtype de la siguiente manera:

Ext.onReady(function(){
var p = Ext.create("Ext.panel.Panel",{
	width	: 300,
	height	: 400,
	items	: [{
		xtype	: "teacher",	//Usando el xtype
		title 	: "John Doe",
		html	: "I'm a teacher!"
	}],
	renderTo	: Ext.getBody()
});
p.center();
});

Es importante notar que al instanciar la clase “Teacher” no estamos usando el prefijo, esto es porque hereda de “Ext.Component” (indirectamente) y todos los componentes utilizan el prefijo “widget” por lo tanto no es necesario usar el prefijo.

También podemos usar el método “widget” de la siguiente manera:

var susan = Ext.widget("teacher",{
	title 	: "Susan Smith",
	html	: "I'm a teacher"
});
var p = Ext.create("Ext.panel.Panel",{
	width	: 300,
	height	: 400,
	items	: [{
		xtype	: "teacher",	//Usando el xtype
		title 	: "John Doe",
		html	: "I'm a teacher!"
	},
		susan  //agregamos la instancia susan al contenedor que ya teniamos
	],
	renderTo	: Ext.getBody()
});

Conclusión

Al definir un alias a la clase que escribimos podemos instanciarla más adelante con el alias que le asignamos, esto nos evita escribir algunas líneas extra de código y nos ayuda a definir los componentes más rápido.

Para definir los “mixins” simplemente escribimos la propiedad “mixins” dentro de nuestra clase, esta propiedad deberá ser un objeto con todas las clases de las que queramos heredar o mezclar.

Ext.define("Bleext.training.Icon",{
	mixins	: {
		floating		: "Ext.util.Floating",
		observable	: "Ext.util.Observable"
	}
	//......
});

En el ejemplo anterior creamos una clase llamada “Icon”, esta clase hereda directamente de “Ext.Base” ya que no le definimos explicitamente alguna otra clase, además le estamos indicando que “herede” de dos clases más, una de ellas es “floating” y “observable”.

La clase Floating contiene los métodos necesarios para posicionar un elemento en las coordenadas “X” y “Y” que nosotros le indiquemos a la instancia, mientras que la clase “Observable” nos permite manejar eventos dentro de la clase “Icon”.

Si en este momento creamos una instancia de “Icon” tendremos todos los métodos y propiedades de la clase “Ext.Base”, “Floating” y “Observable”.

Sobre escribiendo el constructor

Hasta ahora no hemos definido un constructor propio de la clase que hemos creado, así que la pregunta sería, ¿cuál constructor de las tres clases que estamos “heredando” se ejecutará cuando se este construyendo la instancia?

Para responder la pregunta anterior debemos entender que el “pre-procesador” (En otro tema hablare más a fondo sobre los pre/post-procesadores) de los mixins va copiando los métodos y propiedades SI dicho método o propiedad NO EXISTE en la clase destino.

De acuerdo al párrafo anterior entonces decimos que la clase “Icon” hereda el constructor de la clase “Base” mediante la herencia simple, esto significa que los constructores de “Floating” y “Observable” no se están ejecutando y seguramente los constructores de esas clases hacen cosas importantes.

Lo que necesitamos hacer es ejecutar los constructores de los mixins manualmente, esto lo hacemos de la siguiente manera:

Ext.define("Bleext.training.Icon",{
	mixins	: {
		floating	: "Ext.util.Floating",
		observable	: "Ext.util.Observable"
	},

	width	: 100,
	height	: 100,
	border	: true,

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

		this.id = Ext.id(null,"icon-");	//Asignando un Identificador dinámico

		this.addEvents("moved","created");	//método heredado de la clase Observable

		if(this.renderTo){
			this.render(this.renderTo);
			delete this.renderTo;
		}

		this.mixins.floating.constructor.call(this);	//ejecutando manualmente los
		this.mixins.observable.constructor.call(this);//constructores de los mixins
	}
});

Para acceder a las instancias de los mixins usamos la propiedad “this.mixins” seguido del nombre que le asignamos cuando lo configuramos.

Este mismo concepto se aplica cuando existan métodos con el mismo nombre en las diferentes clases de las que estamos heredando.

Renderizando la clase Icon

En el código anterior se ejecutaba el método “render” si la propiedad “renderTo” ha sido definida en los parámetros de configuración, es nuestro deber implementar este método.

render		: function(where){
	if(where){
		this.container = Ext.get(where);			// 1
		this.el = Ext.core.DomHelper.append(where,{	// 2
			id	: this.id,
			tag	: "div"
		});
		this.el = Ext.get(this.el);
		this.el.setStyle({					// 3
			width	: this.width?this.width+"px":"auto",
			height	: this.height?this.height+"px":"auto",
			border	: this.border?"1px solid #aaa":"none",
			background	: "#eee"
		});
	}
},

setPagePosition	: function(xy){		// 4
	this.el.setLeftTop(xy[0]+"px",xy[1]+"px");
	this.fireEvent("moved",xy);
}

En el paso 1 se toma la referencia del elemento contenedor, esto mediante el método “Ext.get” que regresa una instancia del objeto “Ext.Element” el cual contiene la referencia al DOM y además varios métodos para manipularlo de una manera sencilla.

En el paso 2 se crea el elemento que representará a la clase “Icon”, usando la clase “Ext.DomHelper” podemos crear elementos DOM de una manera muy sencilla, en este caso usamos el método “append” para agregar un nodo al contenedor.

En el paso 3 aplicamos los estilos como width, height, etc. estos estilos pueden ser enviados mediante el objeto de configuración para cambiar los valores por defecto.

En el paso 4 se define una función para asignar las coordenadas del elemento que representa a la clase “Icon”, este método es requerido para usar el método “center” que heredamos de la clase “Floating”.

Instanciando la clase Icon

Hemos creado una clase que usa mixins, ahora vamos a probarla creando una instancia de esta y ejecutando alguno de los métodos heredados.

Ext.onReady(function(){
	var icon = Ext.create("Bleext.training.Icon",{
		renderTo	: Ext.getBody()
	});

	icon.on("moved",function(xy){	//heredado de Observable
		console.log(xy);
	});

	icon.center();			//heredado de Floating
});

Al ejecutar el ejemplo verás un cuadrado en el centro de la pantalla, la funcionalidad de centrar el cuadrado no la hemos programado nosotros sino que la heredamos de la clase “Floating” la cual se encarga de calcular el centro.

También hemos usado el método “on” que ha sido heredado de la clase “Observable” y sirve para agregar eventos a las clases.

Diferencia entre un mixin y plugin

Decimos entonces que mediante los mixins podemos agregarle propiedades y métodos a una clase, pero, ¿eso no lo hacen los plugins? Así es, los plugins también hacen algo muy semejante, agregan funcionalidad extra a una clase.

La principal diferencia es que un mixin se agrega a nivel de clase y un plugin se agrega a nivel de instancia, esto significa que los mixins son parte de la definición de la clase, mientras que los plugins no.

Conclusión

Los mixins nos sirven para mezclar o agregar funcionalidad de otras clases a la clase que estamos definiendo, esto nos beneficia para poder diseñar de una manera más robusta y flexible nuestra aplicación.

Si tienes alguna duda puedes publicarla en el foro y entre todos resolverla, comentarios y sugerencias en el blog. Recuerda seguirnos en twitter y facebook.

Ya vimos como crear clases con el nuevo sistema, ahora estudiaremos la manera de como extender una clase para agregarle funcionalidad extra. Para extender una clase unicamente debemos definir la propiedad “extend” seguida de la clase de la cual queremos heredar.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Herencia

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,
	html		: "Testing!"
});

Usando el método “Ext.define” estamos definiendo una clase la cual hereda de “Ext.panel.Panel”, al hacer esto automáticamente nuestra clase cuenta con todos los métodos y propiedades del panel, apartir de esto podemos configurar o especializar nuestra clase. En este caso solamente hemos agregado unas cuantas configuraciones, lo siguiente es crear una instancia de esa clase y renderizarla en algún lugar en nuestro documento.

Ext.onReady(function(){
	Ext.create("Bleext.training.UserPanel",{
		renderTo	: "center"	//<-- DIV que definimos en el html
	});
});

Heredando de Ext.panel.Panel

El método “Ext.onReady” (al igual que en la versión 3) ejecuta la función anónima que recibe como parámetro cuando el DOM esta listo, por lo tanto dentro de esta función creamos una instancia de la clase que recién hemos definido.

Usando un template

En Ext4 existe una propiedad que se llama “tpl”, la cual permite agregar una instancia de la clase Ext.XTemplate o bien una arreglo con los parámetros que recibirá la clase XTemplate para ser creada automáticamente, también podemos definir una propiedad “data” con la información que usará el template.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Herencia

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,
	html		: "Testing!"

	data		: {
		name	: "John",
		lastname: "Doe",
		company	: "Bleext",
		age	: 27,
		status	: "Active",
		phone	: "(12) 34 567 890"
	},
	tpl		: [
		'<p><strong>Name</strong>: {name} {lastname}</p>',
		'<p><strong>Company</strong>: {company}</p>',
		'<p><strong>Age</strong>: {age} years old</p>',
		'<p><strong>Phone</strong>: {phone}</p>',
		'<p><strong>Status</strong>: {status}</p>'
	]
});

Usando un template para el contenido

Nótese como dentro del template definimos los campos del objeto “data” entre llaves “{“ y “}”, esto hará que los valores se remplacen dinámicamente dentro del HTML generado.

Sobre escritura de métodos

Es muy común que cuando desarrollamos orientado a objetos requiramos agregar funcionalidad extra a los métodos o especializarlos en alguna tarea específica de la clase que estamos definiendo.

Al sobre-escribir algún método debemos considerar que estamos eliminando el funcionamiento que se heredo, por lo tanto debemos llamar al método de la super clase para no perder nada. Ext JS 4 provee una forma muy sencilla de ejecutar algún método que se ha sobre-escrito, basta con ejecutar el método “callParent” y automáticamente la librería identifica el método correcto.

Ext.define("Bleext.training.UserPanel",{
	extend 	: "Ext.panel.Panel",	//<-- Herencia

	title 		: "User information",
	width		: 300,
	height		: 300,
	bodyPadding	: 10,

	data		: {
		name	: "John",
		lastname: "Doe",
		company	: "Bleext",
		age	: 27,
		status	: "Active",
		phone	: "(12) 34 567 890"
	},
	tpl		: [
		'<p><strong>Name</strong>: {name} {lastname}</p>',
		'<p><strong>Company</strong>: {company}</p>',
		'<p><strong>Age</strong>: {age} years old</p>',
		'<p><strong>Phone</strong>: {phone}</p>',
		'<p><strong>Status</strong>: {status}</p>'
	],

	initComponent	: function(){
		var me = this;

		me.tbar = [{text:"Save"},{text:"Edit"},{text:"Delete"}]; //especializamos la subclase

		me.callParent();	//<-- llamada al initComponent de la super clase
	}
});

Sobre escritura del método initComponent

En el ejemplo anterior estamos sobre escribiendo el método “initComponent” para agregar un toolbar en la parte superior del panel, nótese como en la última línea se manda a llamar al método “initComponent” de la super clase, esto es de suma importancia ya que si no hacemos esta llamada el componente simplemente no funcionará, esto es porque en la super clase el “initComponent” hace varias cosas importantes.

En Ext3 existía una propiedad “superclass” que se le agregaba de manera estática a las clases, esto ha desaparecido y en su lugar usamos el método “callParent” que es lo suficientemente inteligente para saber cual método llamar en la super clase.

Conclusión

ExtJS fué creado para ser heredado, cuando desarrollamos nuestra propia aplicación haremos uso de la herencia simple para extender los componentes que la librería trae, en el ejemplo de hoy creamos una ficha de un usuario extendiendo la clase panel, también podemos extender cualquier otra clase del framework y especializarla por medio de la herencia simple.

Si tienes alguna duda puedes hacerla en el foro, recuerda seguirnos en twitter y facebook.

El objetivo de este curso es mostrar la manera como integrar los componentes, irá enfocado a arquitectura con ejemplos más aterrizados y prácticos, los tutoriales no se enfocarán tanto en configuraciones y componentes, más bien irá enfocado a la manera como se integran y comunican entre ellos.

Introducción

• Presentación del curso (Temario)
• Instalación del framework

Sistema de clases

• Creación de clases
• Herencia simple
• Herencia múltiple (Mixins)
• Definición del Alias y xtype
• Configuraciones, Estáticos y Singleton

Loader

• Convención de nombres y archivos
• Carga de clases dinámicamente con ExtJS 4

Paquete de datos

• Model
• Proxys
• Readers
• Writers
• Associations
• Validations
• Store
• Sorters, Filters y Grouping

DataView

• Template y XTemplate
• Desplegar información en un DataView

Arquitectura MVC

• Definiendo aplicaciones con Ext
• Modelos, Vistas, Controladores
• ComponentQuery y los Selectores

Desktop con CodeIgniter

• Instalación del Bleextop
• Características
• Apis disponibles
• Seguridad
• Utilizar el desktop con otra tecnología (Java, Grails, Ruby, Phyton, etc…)

Sistema de ejemplo: Bug traking

• Módulo de usuarios
• Módulo de equipos
• Módulo de proyectos
• Módulo de componentes asociados a proyectos
• Módulo de versiones
• Módulo de “issues”
• Dashboard con reportes

Al día de hoy ya tengo algunos tutoriales listos, estos se irán publicando cada dos días, así que sigue visitandonos frecuentemente o bien seguirnos en twitter o facebook para estar al tanto de las actualizaciones.

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.

Adios al adapter

Para los que hemos estado desarrollando desde la versión 1 ya bien sabemos que Ext JS nace como una extensión de YUI, más adelante se introduce prototype, jQuery y el base, para hacer funcionar la librería con alguna de estas cuatro era necesario importar el adapter para que sirviera de “interprete” entre Ext y la librería seleccionado (jQuery por ejemplo).

Para la versión 4 esto ha cambiado, ya no es necesario importar dicho adaptador, de hecho Ext ya no es una extensión de ninguna otra librería y los desarrolladores de Sencha han decidido soportar únicamente el Ext Core que es una librería semejante a jQuery o Prototype, esta decisión fue tomada para que Sencha Touch (librería para móviles) compartiera código con ExtJS 4, además de varias otras ventajas.

Bienvenido Ext Dev

Al descargar la versión 4 te encontrarás con varios archivos en el directorio raíz, ext-all.js, ext-all-debug.js, ext-all-dev.js, ext.js,ext-dev.js

El archivo ext-all.js al igual que en las versiones pasadas contiene todas las clases de la librería comprimidas y listas para subir al ambiente de producción.

En el archivo ext-all-debug.js las clases están descomprimidas y es el archivo que usabamos en las versiones anteriores para el ambiente de desarrollo.

En esta nueva versión encontramos el ext-all-dev.js, este archivo también contiene todo el framework pero además contiene mensajes de error y warning que nos servirán en la fase de desarrollo, así que de ahora en adelante deberíamos usar este para desarrollar.

También encontraremos el archivo ext-dev.js y ext.js, estos archivos están pensados para cuando no requieres cargar toda la librería y simplemente deseas usar algún componente en específico, entonces estos archivos solo cargan lo básico para poder cargar dinámicamente unicamente las clases que se requieran, más adelante trataremos esto a detalle.

Ejemplo de instalación

Para instalar la librería en ambiente de desarrollo es necesario importar el “ext-all-dev”, también requerimos importar los estilos para que se visualicen correctamente los componentes. El HTML quedaría de la siguiente manera:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Ext.Panel</title>
    <!-- Importar los estilos -->
    <link rel="stylesheet" type="text/css" href="../js/Ext/resources/css/ext-all.css" />

    <!-- Importar el ext-all-dev.js -->
    <script type="text/javascript" src="../js/Ext/ext-all-dev.js"></script>

    <script type="text/javascript" >
        Ext.onReady(function(){
            alert("Ext esta instalado correctamente!");
        });
    </script>
</head>
<body>
	<div id="center"></div>
</body>
</html>

Asegurate de asignar bien las rutas del CSS y del JS, la estructura de folders en este ejemplo esta de la siguiente manera:

+ curso
   + classes
      - 01-instalacion.html
   + js
      + Ext
         - ext-all-dev.js
      + resources
         + css
            - ext-all.css

Si al ejecutar el ejemplo en el navegador te sale un error diciendote que “Ext is undefined” seguramente la ruta al archivo “ext-all-dev.js” está incorrecta, asegurate de ponerla bien.

Si no te sale ningún error pero no se ven bien los componentes es posible que la ruta del CSS esté incorrecta, asegurate de que esté escrita correctamente y en la ruta correcta.

Conclusión

Iremos publicando tutoriales de Ext4 con mayor frecuencia, sigue pendiente vía RSS, Twitter o Facebook, además recuerda compartir estos tutoriales en tus redes sociales favoritas, esto nos ayuda a seguir publicando más contenido de manera gratuita.