En la sesión anterior aprendimos como hacer herencia simple con ExtJS, en este tema vamos a hablar como hacer herencia múltiple, es decir como heredar de más de una clase. 

La propiedad Mixins

En el ejemplo que vamos a crear hoy vamos a usar las clases que creamos en la sesiones pasadas: Usuario y Cliente. Para poder hacer la herencia múltiple Ext cuenta con una propiedad llamada Mixins, la cual es un objecto que contendrá todas las clases de las cuales queremos heredar. Para este ejemplo vamos a heredar de la clase Ext.util.Observable asi que la agregamos al objecto Mixins usando un alias observable, podemos escoger cualquier nombre en el alias pero se recomienda que sea el mismo nombre de la clase para no causar confusión. La clase Observable sirve mayormente para el manejo de eventos. Hasta este momento la clase Cliente está heredando de dos clases.

Ext.define('MyApp.data.Cliente',{
    extend      : 'MyApp.data.Usuario',
    
    mixins      : {
        observable : 'Ext.util.Observable'
    },
    rfc     : '',
    calle   : '',
    colonia : '',
    ciudad  : '',
    estado  : '',
    pais    : '',

    constructor : function(options){
        console.log('Constructor en la subclase!');

        this.callParent([options]);
    },

    login       : function(item){
        console.log('Login: Dentro de la subclase');

        this.callParent(arguments);
    },

    agregarPedido : function(item){
        console.log(item);
    }

});

Lo que vamos a hacer en este ejemplo es simular la acción de login como si se hiciera una petición Ajax al servidor y éste respondiera con un success o failure.

Ext.define('MyApp.data.Cliente',{
    extend      : 'MyApp.data.Usuario',
    
    mixins      : {
        observable : 'Ext.util.Observable'
    },

    rfc     : '',
    calle   : '',
    colonia : '',
    ciudad  : '',
    estado  : '',
    pais    : '',

    constructor : function(options){
        console.log('Constructor en la subclase!');

        this.addEvents({    //Paso 1
            'success' : true,
            'failure' : true
        });

        this.callParent([options]);
        this.mixins.observable.constructor.call(this);   //Paso 2
    },

    login       : function(item){
        var me = this;
        console.log('Login: Dentro de la subclase');

        this.callParent(arguments);

        setTimeout(function(){  //Paso 3
            me.fireEvent('success',new Date(),3,2,1);
        },2000);
    },

    agregarPedido : function(item){
        console.log(item);
    }

});

• En el paso 1 agregamos el método addEvents en el constructor de la clase Cliente, este método esta definido dentro de la clase Observable y recibe como parámetro un objeto el cual tendrá lo eventos que se quieran definir o agregar a la clase. Estos eventos van a ser disparados cuando se ejecute el método login.
• En el paso 2 llamamos el constructor de la superclase usando el método call, este paso es de suma importancia ya que como lo habíamos mencionado en la sesión anterior si no lo hacemos es posible que no estemos incluyendo alguna funcionalidad importante. Otra cosa muy importante que debemos recordar es que los métodos y propiedades que heredamos de los mixins serán parte de la clase resultante, por lo tanto todos los métodos y propiedades de la clase Observable serán agregados a la clase Cliente excepto aquellos que tengan el mismo nombre, esto es para evitar conflictos y no sobreescribir o remplazar algún método o propiedad. La forma en como podemos tener acceso a propiedades o métodos es usando el objeto mixins.
• En el paso 3 simulamos la acción de login con el método setTimeout el cual recibe dos parámetros, el primero es una función que será ejecutada en cierta cantidad de milisegundos y el segundo es la cantidad de milisegundos. 
• En el paso 4 se utiliza el método fireEvent que también pertenece a la clase Observable y podemos utilizar en la clase Cliente debido a la herencia. El método fireEvent ejecuta el evento que se indica en el primer parámetro que en este caso es el evento success que definimos en el paso 1. Los siguientes parametros como la fecha y los números les serán enviados al listener que esté escuchando este evento.

Agregando un listener

Para probar nuestro ejemplo necesitamos crear un archivo HTML 04-mixins.html donde vamos a incluir la hoja de estilos y el ext-all-dev.js ya que vamos a estar usando el widget de mensajes. Copiamos lo que hicimos en el HTML de la sesión anterior ya que básicamente solo le vamos a agregar los listeners que escuchen cuando se ejecuten los eventos que creamos en la clase Cliente.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8" />
	<title>Mixins</title>
	<link rel="stylesheet" href="../extjs-4.1.0/resources/css/ext-all.css"/>
	<script type="text/javascript" src="../extjs-4.1.0/ext-all-dev.js"></script>
	<script type="text/javascript" src="Usuario.js"></script>
	<script type="text/javascript" src="Cliente.js"></script>
	<script type="text/javascript">
		Ext.onReady(function(){

			var cliente = Ext.create('MyApp.data.Cliente',{
				username	: 'john',
				password	: '123',
				email		: 'john@gmail.com',
				calle      	: 'Maria Josefa 2053',
				colonia		: 'Ignacio Mejia'
			});

			cliente.on('success',function(hora,x,y,z){  //Paso 1
				Ext.Msg.alert('Exito','El usuario se registro con éxito!');   //Paso 2

			});

			cliente.on('success',function(hora,x,y,z){  //Paso 3
				console.log('Otro listener!');
				
			});

			cliente.login();
			cliente.agregarPedido({
				nombre : 'Mesa',
				precio : 123.65
			});

		});
	</script>
</head>
<body>

</body>
</html>

• En el paso 1 agregamos un listener a la instancia de cliente usando el método on, que básicamente es un atajo del método addListener, fue heredado de la clase Observable. El primer parámetro es el nombre del evento que se quiere escuchar y el segundo es la función que se va a ejecutar cuando se dispare dicho evento. Podemos ver que en la función estamos pasando varios parámetros, estos parámetros son los que le enviamos con el método fireEvent en la clase Cliente y pueden ser usados dentro de esta función anónima.
  
• En el paso 2 estamos imprimiendo un mensaje de alerta con el método Ext.Msg.alert el cual es un widget que recibe dos parámetros, el primero es el título y el segundo es el mensaje que se quiere mostrar.
  
• En el paso 3 creamos otro listener que está escuchando también al evento success e imprime un mensaje en la consola cuando este evento sea ejecutado. Realmente podemos tener cualquier cantidad de listeners de acuerdo a lo que necesitemos hacer.

Este fue un ejemplo sencillo de como podemos hacer la herencia múltiple, solo tenemos que agregar las clases a la propiedad mixins con sus respectivos alias y comenzar a usar las propiedades y métodos que necesitemos de esas clases.

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

Este tutorial pertenece al curso Fundamentos de Ext 4, 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!