Definiendo dependencias Más videos
Comentarios: 1
Likes: 0 Persona
Duración: 9.41 minutos
Dificultad: Principiante
Descripción del tema
En esta sesión vamos a ver como podemos definir dependencias y hacer que el Loader se encargue de cargarlas cuando requerimos la clase principal.
Para el ejemplo que vamos a desarrollar necesitamos crear un HTML llamado 02-dependencias.html adentro de la carpeta 03-loader, podemos copiar el código que utilizamos en el archivo HTML de la sesión anterior donde ya tenemos configurado el Loader.
Por último le estamos asignando a la propiedad data la información que va a ser renderizada con el template que definimos anteriormente usando el método getData(). Este método regresa la información que contiene el modelo Client, si bien recordamos esta información la estamos mandando con la propiedad cliente de la instancia que creamos en el archivo HTML.
Ahora bien podemos probar el ejemplo en nuestro navegador y deberíamos ver un panel con el nombre y apellido: John Doe.
Esta es la forma en como agregamos las dependencias a las clases que definimos de una manera muy sencilla, solo es necesario especificar que clases queremos incluir con la propiedad requires.
Para el ejemplo que vamos a desarrollar necesitamos crear un HTML llamado 02-dependencias.html adentro de la carpeta 03-loader, podemos copiar el código que utilizamos en el archivo HTML de la sesión anterior donde ya tenemos configurado el Loader.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Loader</title>
<link rel="stylesheet" href="../ext-4.2.1/resources/css/ext-all.css"/>
<script type="text/javascript" src="../ext-4.2.1/ext-all-dev.js"></script>
<script type="text/javascript">
Ext.Loader.setConfig({ //paso 1
enabled : true,
paths : {
MyApp : 'js/MyApp'
}
});
Ext.require('MyApp.view.ClientePanel'); //paso 2
Ext.onReady(function(){
var panel = Ext.create('MyApp.view.ClientePanel',{ /paso 3
renderTo : Ext.getBody(),
width : 250,
height : 200,
cliente : {
nombre : 'John',
apellido: 'Doe'
}
});
panel.center(); //paso 4
});
</script>
</head>
<body>
</body>
</html>- En el paso 1 configuramos y habilitamos el Loader.
- En el paso 2 estamos requiriendo la clase ClientePanel, la cual vamos a crear posteriormente.
- En el paso 3 creamos una instancia de la clase ClientePanel, especificamos donde va a ser renderizado el panel, el ancho, la altura y agregamos la propiedad cliente la cual será la información que le estaremos mandando a la clase ClientePanel, en este caso será: nombre y apellido.
- En el paso 4 simplemente estamos centrando el panel.
Ext.define('MyApp.view.ClientePanel',{
extend : 'Ext.panel.Panel', //paso 1
alias : 'widget.clientepanel', //paso 2
requires : [ //paso 3
'MyApp.model.Client',
'MyApp.model.User'
],
initComponent : function(){
var me = this;
me.callParent();
}
});
- En el paso 1 estamos definiendo de que clase va a heredar la clase ClientePanel.
- En el paso 2 definimos un alias a esta clase. Es importante recordar que el prefijo widget se utiliza cuando la clase esté heredando de la clase Component.
- En el paso 3 estamos usando la configuración requires, la cual es un arreglo con todas las clases que la clase ClientePanel va a utilizar internamente. En este caso la clase ClientePanel va a usar la clase Client y la clase User.
me.model = Ext.create('MyApp.model.Client',me.cliente);
me.tpl = [
'<p>{nombre} {apellido}</p>'
];
me.data = me.model.getData();Al crear la instancia le estamos asignando al modelo la información que estamos pasando con la propiedad cliente. Para mostrar el nombre y apellido estamos usando una propiedad llamada tpl, que es una propiedad de la clase Ext.XTemplate la cual permite definir fragmentos de HTML donde le podemos asignar información.Por último le estamos asignando a la propiedad data la información que va a ser renderizada con el template que definimos anteriormente usando el método getData(). Este método regresa la información que contiene el modelo Client, si bien recordamos esta información la estamos mandando con la propiedad cliente de la instancia que creamos en el archivo HTML.
Ahora bien podemos probar el ejemplo en nuestro navegador y deberíamos ver un panel con el nombre y apellido: John Doe.
Esta es la forma en como agregamos las dependencias a las clases que definimos de una manera muy sencilla, solo es necesario especificar que clases queremos incluir con la propiedad requires.
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.
1Comentario
En caso de que la carpeta de Ext la mueva, es necesario direccionarla en el Path del loader??? o simplemente al referenciar al ext.js todo se redirecciona???