Ya hablamos un poco acerca de la herencia con JavaScript, vimos como hacerla utilizando los prototipos, el día de hoy quiero mostrar una manera muy elegante utilizando ExtJS para crear nuestras propias “clases” (prototipos, en JS no existen las clases) , componentes o extender de algún Panel, Ventana o lo que necesitemos. Es necesario que comprendamos que en JavaScript no existe como tal el concepto de “clase”, en JS utilizamos “prototipos” de los cuales generamos instancias, también podemos extenderlos utilizando la “herencia de prototipo”, la manera de hacerlo es muy sencilla pero es un poco laboriosa. ExtJS nos provee de una utilería que nos hace la vida muchas más sencilla, mediante el método “Ext.extend” podemos crear “clases” (prototipos) de una manera muy elegante y luego podemos extenderlos para crear otras “clases” (prototipos) y reutilizar nuestro código las veces que necesitemos. Podemos crear un prototipo de dos formas principales, y las analizaremos por separado.

Crear prototipos a la manera antigua

Este método era propio de la versión 1.0 de ExtJS, esta era la manera de crear nuestros prototipos (clases), primero crear la función constructora y luego utilizar Ext.extend para terminar de crear el prototipo.

Ext.ns("com.quizzpot.tutorial");				// Step 1

com.quizzpot.tutorial.Person = function(options){	//Step 2
	Ext.apply(this,options || {});			//Step 3
	
	console.debug("Person constructor!");
	
};

En el paso uno creamos el namespace que usará nuestro prototipo (clase), ya vimos las ventajas de hacerlo y porqué es necesario. En el paso dos creamos la función constructora, esta función se ejecutará cada que se cree una instancia de nuestro prototipo, aquí podemos hacer todo lo que necesitemos para inicializar el nuevo objeto. En el paso tres solamente estamos aplicando las opciones que el usuario definió para la nueva instancia, la idea de esto es que podamos cambiar las configuraciones por defecto de cada objeto. Una vez que tenemos definido nuestro constructor podemos asignarle las propiedades y métodos que tendrá nuestro prototipo.

com.quizzpot.tutorial.Person = Ext.extend(com.quizzpot.tutorial.Person,{ 	//Step 1
	username	: "none",			//Step 2
	email		: "none",
	name		: "none",
	startTime	: new Date(),
	endTime		: new Date(),
	
	checkIn		: function(){			//Step 3
		this.startTime = new Date();
	},
	
	checkOut	: function(){
		this.endTime = new Date();
	},
	
	workingHours: function(){
		return (this.endTime - this.startTime)/1000;
	}
	
});

En el paso uno hacemos uso del método “Ext.extend”, este método toma como primer argumento el objeto al cual queremos extender, en este caso a la función constructora solamente, pero podría ser cualquier otro componente que deseemos extender, el segundo parámetro es un objeto con el código que deseamos agregar o sobre escribir, en otras palabras la “subclase” (¿subprototipo? ¡objeto!), el método Ext.extend regresa un nuevo prototipo que contiene los método de la superclase (el prototipo original) y los métodos y propiedades del objeto nuevo. En el paso dos solamente creamos unas propiedades, estas serán agregadas al prototipo de nuestro nuevo objeto. En el paso tres creamos unos métodos.

Crear instancias del prototipo

Una vez que tenemos nuestro prototipo listo podemos crear instancias de él muy fácilmente:

var crysfel = new com.quizzpot.tutorial.Person({	//Step 1
	username	: "crysfel",
	email		: "crysfel@dominio.com",
	name		: "Crysfel Villa"
});

crysfel.checkIn();					//Step 2
setTimeout(function(){
	crysfel.checkOut();
	var time = crysfel.workingHours();
	console.debug(time+" seconds working!");	//Step 3
},3000);

En el paso uno creamos una instancia del prototipo utilizando el operador “new”, podríamos crear todas las que necesitemos cambiando sus configuraciones. En el paso dos ejecutamos uno de los métodos de la instancia. En el paso tres se imprime la cantidad de segundos transcurridos entre la hora de entrada y la hora de salida. Como puedes ver es muy sencillo crear prototipos utilizando Ext.extend, ahora vamos a ver otra forma de hacer lo mismo pero un poco más elegante. Crear prototipos con la nueva versión ExtJS mejoró la manera de crear prototipos en la versión 2.x, en esta versión ya no es necesario crear una función constructora y luego extenderla, simplemente utilizamos la propiedad “constructor” y extendemos de Object.

Ext.ns("com.quizzpot.tutorial");

com.quizzpot.tutorial.Person = Ext.extend(Object,{	//Step 1
	username	: "none",
	email		: "none",
	name		: "none",
	startTime	: new Date(),
	endTime		: new Date(),
	
	constructor	: function(options){	//Step 2
		Ext.apply(this,options || {});
	
		console.debug("Person constructor!");
	},
	
	checkIn		: function(){
		this.startTime = new Date();
	},
	
	checkOut	: function(){
		this.endTime = new Date();
	},
	
	workingHours: function(){
		return (this.endTime - this.startTime)/1000;
	}
	
});

En el paso uno extendemos directamente de Object quien es el padre de todos los objetos, es importante mencionar que el método “Ext.extend” no modifica la superclase (superprototipo), sino que regresa un nuevo objeto tomando la super clase y añadiéndole las propiedades y métodos de loa subclase. En el paso dos definimos el constructor de la clase (prototipo) y ahí alojamos el código que se ejecutará cuando se creen nuevas instancias. Personalmente me gusta mucho esta nueva manera de hacer prototipos, es muy fácil y el código se lee muy bien, además de que nos evita la fatiga de asignar nosotros mismos cada propiedad y método al “prototype” de nuestro objeto.

Sobre escritura de métodos

Hasta ahorita hemos creado un solo prototipo, lo que haremos ahora es extenderlo para crear uno nuevo y sobre escribir algunos métodos.

com.quizzpot.tutorial.Employee = Ext.extend(com.quizzpot.tutorial.Person,{	//Step 1
	position		: "Jr. Programmer",
	technicalSkills	: ["JavaScript","Ext JS","XHTML/CSS","Java"],
	tasks			: [],
	
	constructor		: function(options){				//Strep 2
		console.debug("Employee constructor!");

		com.quizzpot.tutorial.Employee.superclass.constructor.call(this);//Step 3
		
	},
	
	checkOut	: function(){
		com.quizzpot.tutorial.Employee.superclass.checkOut.call(this); //Step 4
		this.endTime.setHours(18);
		return this.endTime;
	},
	
	workingHours	: function(){
		var seconds = com.quizzpot.tutorial.Employee.superclass.workingHours.call(this);
		return seconds/3600;
	},
	
	assignTask		: function(task){
		this.tasks.push(task);
	}
});

En el paso uno utilizamos el método Ext.extend para extender de la clase (prototipo) “Person” e iniciamos a escribir el código para la subclase “Employee”. En el paso dos creamos el constructor de “Employee” utilizando la propiedad “constructor” y automáticamente ExtJS creará la función constructora. El paso tres es muy importante, aquí estamos ejecutando el constructor de la superclase, de esta manera es como reutilizaremos el código que ya hemos escrito en la superclase. Es importante mencionar que ExtJS crea automáticamente un acceso a la superclase mediante la propiedad “superclass” la cual es insertada a cada instancia, luego nos referimos al método que necesitamos ejecutar en la superclase y simplemente lo ejecutamos en el contexto actual usando el método “call”. En el paso cuatro estamos sobre escribiendo el método “checkout” pero también ejecutamos el “checkout” de la superclase que es el que define la hora de salida, luego en la subclase le asignamos una hora diferente, en este caso las seis de la tarde. Podemos sobre escribir los métodos que necesitemos o bien crear nuevos métodos y propiedades para la subclase, ahora vamos a escribir la manera de crear instancias de la subclase:

var crysfel = new com.quizzpot.tutorial.Employee({
	username	: "crysfel",
	email		: "crysfel@dominio.com",
	name		: "Crysfel Villa"
});

crysfel.checkIn();
setTimeout(function(){
	crysfel.checkOut();
	var time = crysfel.workingHours();
	console.debug(time+" hours working!");
},3000);

Si ejecutas el ejemplo verás en la consola de de tu navegador algunos mensajes, nota como se ejecuta primero el constructor de la subclase y luego éste manda ejecutar el constructor de la superclase.

Conclusiones

ExtJS nos permite crear clases de una manera muy elegante, personalmente me agrada mucho esta manera ya que es muy entendible y fácil de realizar, en futuros tutoriales veremos cómo extender componentes de ExtJS para crear nuestras propias extensiones. Si te ha gustado este tutorial por favor compártelo en las redes sociales y ayúdanos a crecer para que podamos seguir financiando estos tutoriales de forma gratuita, recuerda seguirnos en Twitter o inscribirte al RSS.

Te gustaría recibir más tutoriales como este en tu correo?

Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.

Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!