El XType y Alias Más videos
Comentarios: 5
Likes: 0 Persona
Duración: 15.8 minutos
Dificultad: Principiante
Descripción del tema
En este tema vamos a hablar del xtype y de como podemos definirlo mediante la propiedad alias. La manera de definir el xtype de los componentes ha cambiado y se han agregado nuevas propiedades especiales, en esta sesión vamos a ver las nuevas características.
En el método iniComponent vamos crear una instancia de la clase Cliente para poder poner el nombre y apellido del cliente como titulo del panel y en el contenido usando la propiedad html vamos a poner el username y el email.
La propiedad alias
Vamos a crear una nueva clase llamada ClientePanel.js la cual heredará de la clase Ext.panel.Panel, ésta clase es un componente de Ext que es básicamente un contenedor. A la clase ClientePanel le vamos a agregar una propiedad llamada alias que va a ser un sobrenombre que le vamos a dar a la clase para que podamos crear instancias de una manera más simple. Es muy importante que definamos un prefijo, el cual va a depender del tipo de clase o componente que se esté definiendo, en este caso estamos usando widget.cliente ya que se está heredando de la clase Panel la cual hereda de la clase AbstractComponent. Siempre que se herede de la clase Component se usará widget, si se hereda de la clase Store, se usará el prefijo store, si se hereda de Proxy el prefijo sera proxy.Ext.define('MyApp.view.ClientePanel',{
extend : 'Ext.panel.Panel', //paso 1
alias : 'widget.cliente', //paso 2
config : { //paso 3
model : null
},
collapsible : true, //paso 4
bodyPadding : 5, //paso 5
margin : 5, //paso 6
});- En el paso 1 estamos usando la propiedad extend para heredar de la clase Ext.panel.Panel.
- En el paso 2 estamos usando la propiedad alias donde le indicamos un sobrenombre a nuestra clase. Es importante recordar ponerle el prefijo adecuado a nuestra clase para que podamos identificar más fácilmente que tipo de clase es, en este caso usamos widget porque la clase hereda de la clase Ext.panel.Panel la cual hereda de Ext.Component.
- En el paso 3 estamos usando la propiedad config y le agregamos una configuración llamada model la cual nos va a servir al momento de crear una instancia de la clase ClientePanel.
- En el paso 4 agregamos la propiedad de collapsible la cual permite que el panel se pueda colapsar.
- En el paso 5 le agregamos algo de padding al panel usando la propiedad bodyPadding.
- En el paso 6 le agregamos un margen de 5px al panel usando la propiedad de.
En el método iniComponent vamos crear una instancia de la clase Cliente para poder poner el nombre y apellido del cliente como titulo del panel y en el contenido usando la propiedad html vamos a poner el username y el email.
initComponent : function(){
var me = this,
cliente = Ext.create('MyApp.data.Cliente',this.getModel());
me.title = cliente.getNombre()+' '+cliente.getApellido();
me.html = [
'<p>Username: '+cliente.getUsername()+'</p>',
'<p>Email: '+cliente.getEmail()+'</p>'
];
me.callParent();
}No olvidemos incluir al final del método initComponent la llamada al constructor de la superclase.Probando el ejemplo en el navegador
Vamos a crear el HTML donde vamos a probar la clase que hemos creado. Podemos copiar el HTML que usamos en la sesión pasada, importando los archivos necesarios y la clase ClientePanel.js, el nombre del archivo será 07-alias.html.<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Alias</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" src="ClientePanel.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var contenedor = Ext.create('Ext.panel.Panel',{ //paso 1
title : 'Usuarios',
width : 300,
height: 400,
renderTo : Ext.getBody(), //paso 2
items : [{ //paso 3
xtype : 'cliente', //paso 4
model : { //paso 5
username : 'juan',
nombre : 'Juan',
apellido: 'Perez',
email : 'juan@bleext.com'
}
},{
xtype : 'cliente',
model : {
username : 'susana',
nombre : 'Suana',
apellido: 'Fuentes',
email : 'susana@bleext.com'
}
},{
xtype : 'cliente',
model : {
username : 'pedro',
nombre : 'Pedro',
apellido: 'Marinez',
email : 'juan@bleext.com'
}
},{
xtype : 'cliente',
model : {
username : 'carolina',
nombre : 'Carolina',
apellido: 'Perez',
email : 'carolina@bleext.com'
}
}]
});
contenedor.center(); //paso 6
});
</script>
</head>
<body>
</body>
</html>- En el paso 1 creamos un panel contenedor que va a tener varias instancias de la clase ClientePanel. Le agregamos el título "Usuarios" y un ancho de 300px por 400px de altura.
- En el paso 2 le estamos indicando donde se va a renderizar el panel con la propiedad renderTo, esta propiedad recibe el id de algún tag que esté definido en el body o como en este caso simplemente le definimos el body usando el método Ext.getBody().
- En el paso 3 estamos agregando un arreglo de items, donde cada item va a definir los elementos que va a contener el panel. Le podemos definir n cantidad de items, como se muestra en el código anterior.
- En el paso 4 estamos definiendo el tipo de componente del cual vamos a crear una instancia, en este caso es de nuestra clase ClientePanel. Recordemos que a la clase ClientePanel le asignamos el alias cliente. La propiedad xtype sirve para crear la instancia de alguna clase sin necesidad de usar el método Ext.create.
- En el paso 5 estamos asignando las propiedades de username, email, nombre y apellido a la propiedad model. Recordemos que en la clase ClientePanel tenemos definida una configuración llamada model.
- En el paso 6 solo estamos centrando el panel contenedor.
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!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Fundamentos de Ext 4, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
5Comentarios
Los Alias solo pueden usarse o llamarse dentro de un xtype? O por ejemplo yo le podría dar un alias a mi store y usar ese alias dentro de la propiedad store de un grid?
Es correcto, para definir un alias en un store sería "store.elnombrequequieras", y para usarla en la definición de tu grid o cualquier otro componente que use un store lo harías type : "elnombrequequieras", no olvidar requerir la clase del store para que Ext pueda instanciar la clase para ese alias.
Esta linea es confusa para mi: cliente = Ext.create('MyApp.data.Cliente',this.getModel()); Como se inyectan los valores del modelo en la pagina?
Si te das cuenta se definió una propiedad "model" dentro del objeto config, luego en el html se están definiendo instancias de nuestro panel, ahi estamos definiendo la información del objeto "model". Saludos
Hola Crysfel, me esta dando este error en este ejemplo m {sourceClass: "Ext.Loader", sourceMethod: "require", msg: "Ext.Loader is not enabled, so dependencies cannot …amically. Missing required class: MyApp.data.User", message: "Ext.Loader is not enabled, so dependencies cannot …amically. Missing required class: MyApp.data.User"}