Clases bajo demanda Más videos
Descripción del tema
Ext JS 4 introduce una manera muy sencilla de cargar clases bajo demanda, esto nos permitirá optimizar la carga inicial de nuestra aplicación e ir cargando los módulos justo cuando el usuario los solicita.
Configurar el Path
En este ejemplo vamos a crear una clase e incluirla dinámicamente, para hacer eso es necesario agregar una nueva carpeta llamado 03-loader a nuestro proyecto. Adentro de la carpeta vamos a crear un HTML llamado 01-loader.html donde vamos a indicar el path de la clase que queremos agregar.
<!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> </head> <body> </body> </html>
También vamos a crear un carpeta llamada js, adentro de js otra carpeta llamada MyApp y adentro de esta carpeta otra carpeta llamada model, al crear estas carpetas estamos definiendo el espacio de nombres que va a tener la clase. Adentro de la carpeta model vamos a crear la clase Client.js:
Ext.define('MyApp.model.Client',{
extend : 'Ext.data.Model',
fields : [
'nombre','apellido'
]
});En esta clase estamos heredando de la clase Ext.data.Model que básicamente nos permite definir un modelo de datos, la clase Model tiene una propiedad llamada fields para definir los campos que va a contener el objeto.
Lo siguiente que necesitamos hacer es configurar el Loader en el HTML que creamos previamente.<script type="text/javascript">
Ext.Loader.setConfig({ //paso 1
enabled : true,
paths : { //paso 2
MyApp : 'js/MyApp'
}
});
Ext.Loader.require('MyApp.model.Client',function(){ //paso 3
console.log('Clase cargada con éxito!');
});
</script>
- En el paso 1 usamos el método Ext.Loader.setConfig para configurar el Loader y lo habilitamos ya que por defecto está deshabilitado pues estamos utilizando el ext-all-dev.js, si utilizáramos el ext-dev, ext-debug o ext el Loader estaría ya habilitado.
- En el paso 2 estamos definiendo el path de donde está el código fuente. La configuración path recibe un objeto con los namespaces principales, en este caso Myapp es el namespace que utilizamos en la clase Client.
- En el paso 3 estamos requiriendo la clase y mandando un mensaje en la consola cuando la clase haya sido cargada de manera asíncrona.
/*
Ext.Loader.require('MyApp.model.Client',function(){
console.log('Clase cargada con exito!');
});
*/
Ext.require('MyApp.model.Client');
Ext.onReady(function(){
console.log('Clases importadas');
});Podemos utilizar el Ext.require en lugar de Ext.Loader.require ya que internamente hace una referencia al método require que se encuentra dentro del Loader. Incluso podemos agregar más clases en el Ext.require y en lugar de pasarle un String podemos pasarle un arreglo con todas las clases que queramos importar:Ext.require(['MyApp.model.Client','MyApp.model.User']);Antes de probar el ejemplo necesitamos que crear la clase Myapp.model.User adentro de la carpeta model:
Ext.define('MyApp.model.User',{
extend : 'Ext.data.Model',
fields : ['email','username']
});Cuando nuestra aplicación esté 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.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
Hola qué tal, tus tutoriales son excelentes. Quisiera pedir tu ayuda con respecto a una aplicación que estoy desarrollando. Quiero que se cree un formulario dinámicamente al ser un dato especifico cree un dropdown, al ser otro dato cree un textfield, al ser otro cree un radio, etc. En un formulario pueden venir 2 o 3 dropdown estos se llenan claro desde base de datos. Espero puedas ayudarme ya que no encuentro el método correcto para la creación de estos. Saludos