Crysfel’s Blog
Introducción a Ext Js
Monday, March 24, 2008, 06:25:30 pm
Desarrollo, JavaScript, Tutoriales
En el último proyecto en el cual he trabajado, he utilizado un framework javascript que vale la pena hablar de él en este blog, y se trata de Ext Js, una excelente librería para crear interfaces de usuario, Ext nos facilita mucho el trabajo a los desarrolladores, pues en unas cuantas líneas de javascript podemos hacer interfaces realmente buenas.
En este artículo quiero mostrar como hacer mensajes, tablas y ventanas, con esto pretendo dar una introducción a esta fantástica librería y así mostrar la facilidad en el desarrollo de software.
Primeramente es necesario mencionar que Ext Js originalmente surgió como una extensión de la librería de Yahoo, con esto me refiero a que Ext Js nos da funcionalidad de más alto nivel, el manejo del DOM, AJAX y funcionalidades básicas son hechas por la librería YUI, pues Ext Js se enfoca en componentes o widgets.
Al ser diseñada desde un principio como una extensión montada sobre YUI, ahora es posible utilizarlas con otras librerías como JQuery o Prototype. Solo es necesario utilizar el “adapter” adecuado, y Ext JS utilizará la librería que uno necesite o conozca mejor para realizar las operaciones de bajo nivel, como manejo de eventos, consultas al DOM, manejo del CSS y todo lo que es posible hacer con tu librería favorita.
Una vez que tenemos una idea general de lo que se trata Ext Js, el siguiente paso es descargar la última versión liberada, para poder continuar con esta introducción.
Una vez descargado, es necesario importar al documento tu librería favorita, el adapter correspondiente y el archivo “Ext-all.js”, estas son las posibles combinaciones que puede hacer, y el orden en que deben estar:
Utilizando Ext en modo Stand-alone, al decir stand alone significa que Ext Js utilizará su propia librería, que se llama Ext base, la cual contiene todo lo necesario para manejo de Dom, Ajax, animaciones, etc.
——————————————————————-
ext-base.js
ext-all.js (o los componentes que necesites)
Utilizando Yahoo! UI (.12+)
——————————————————————-
yui-utilities.js
ext-yui-adapter.js
ext-all.js (o los componentes que necesites)
Utilizando jQuery (1.1+), jQuery es una de las librerías mas populares dentro de los desarrolladores, es por eso que Ext js ha creado un adapter para que podamos utilizar esta librería, los archivos a importar son los siguientes:
——————————————————————-
jquery.js
ext-jquery-adapter.js
ext-all.js (o los componentes que necesites)
Utilizando Prototype (1.5+) / Scriptaculous (1.7+), prototype fué uno de los primeros frameworks javascript, es muy popular y me atreveria a decir que la mas utilizada entre desarrolladores.
——————————————————————-
prototype.js
scriptaculous.js?load=effects (o cualquier cosa que necesites cargar de scriptaculous)
ext-prototype-adapter.js
ext-all.js (o los componentes que necesites)
En este tutorial se explica en modo “stand-alone”, esto por que mi librería favorita no esta soportada por Ext Js 
(Mootools, que por cierto, hay un adapter de terceros para la versión Ext 1.1), por lo tanto se incluye al documento “adapter/ext/ext-base.js” y “ext-all.js”, para esto crea un carpeta en tu disco duro (donde quieras), copia los archivos anteriores a esta nueva carpeta, y además copia la carpeta “resources”, pues en esta se encuentran las imágenes y hojas de estilo necesarias para los componentes, además es necesario importar “ext-all.css”, crear el archivo HTML donde se trabajará, una buena practica es separar el HTML del javascript, entonces creamos el archivo “introduccion.js” donde se escribirá todo el javascript de este tutorial, los imports deben quedar así:
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="introduccion.js"></script>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css">
En el archive introduccion.js colocar el siguiente código:
alert("Felicidades! Has configurado Ext correctamente!");
});
Este mensaje tiene que aparecer si todo esta configurado correctamente, además de que se ejecutara cuando el DOM este listo para ser utilizado.
Mensajes
Lo primero que mostraré es la forma de mandar mensajes al usuario, como alertas, confirmaciones, errores, etc. Lo que se hará ahora es cambiar el archivo introducción.js por lo siguiente:
Ext.Msg.alert('Bienvenido','Felicidades! Has configurado Ext correctamente!');
});
Al hacer esto, se esta mandando un alert al usuario, pero con la interfaz de Ext, como puedes ver es algo muy sencillo y se ve muy bien, ahora voy a mostrar un método con más opciones de configuración para mandar mensajes y tener control sobre los botones que ha presionado el usuario.
Ext.Msg.show({
title:'Bienvenido',
msg: 'Felicidades! Has configurado Ext correctamente! ¿estas emocionado?',
buttons: Ext.Msg.YESNOCANCEL,
fn: procesarResultado,
icon: Ext.MessageBox.QUESTION
});
function procesarResultado (btn){
if(btn=='yes'){
Ext.Msg.alert('Resultado','SI estas emocionado!! Excelente!!');
}else{
Ext.Msg.alert('Resultado','NO estas emocionado!! pues nimodos!!');
}
}
});
Lo más importante a resaltar es notar la diferencia entre la forma de mostrar el mensaje, en el primer ejemplo es el método alert, recibiendo dos parámetros, siendo que en el segundo ejemplo el método show recibe un solo parámetro, el cual es un objeto con propiedades de configuración.
Otro punto importante es que la propiedad fn permite referenciar la función que manejará los eventos del usuario, cuando de clic en algún botón, la función que se ha especificado aquí será disparada, te recomiendo comiences a jugar un poco cambiando algunas opciones, puede encontrar las opciones permitidas en el API de Ext Js.
Grids o Tablas
La tabla o grid, es el componente más popular de este framework, ya que es muy sencillo hacer tablas con capacidades realmente buenas.
Primeramente se necesita la información que va a ser desplegada, contenida en un array por cada renglón que se quiere desplegar, en proyectos reales esta información puede venir de una base de datos o de un webservice, para este ejemplo “hardcode”.
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
El siguiente paso es crear un lector que pueda interpretar esta información, para poder procesarla en la tabla, existen varios tipos de lectores, para este caso se utiliza el de ArrayReader, pues la información anterior es un array, es muy común utilizar el lector de XML cuando usamos Ajax.
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
Como se puede notar, se le ha asignado un nombre a cada columna, al igual que el tipo de dato que esta contiene, en el caso de la fecha se ha creado un formato de despliegue, es importante especificar el tipo de dato, pues al momento de ordenar la tabla, es de vital importancia.
El último paso es crear la tabla, donde se le pasará la información, contenida en el arreglo, y el lector de esta.
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: 'Compañia', width: 120, sortable: true, dataIndex: 'company'},
{header: 'Precio', width: 90, sortable: true, dataIndex: 'price'},
{header: 'Cambio', width: 90, sortable: true, dataIndex: 'change'},
{header: '% Cambio', width: 90, sortable: true, dataIndex: 'pctChange'},
{header: 'Último cambio', width: 120, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'grid',
title: 'Titulo de la tabla',
width: 500,
frame: true
});
Con la clase Ext.grid.GridPanel se crean las tablas, es necesario darle la información a desplegar, por medio de la propiedad “store”, las columnas que va a contener, donde a cada columna se le especifica su titulo, su tamaño, si será ordenable y lo más importante, el “dataIndex” que es donde se relaciona la columna con la información en el Lector, la opción renderTo, es el ID del elemento donde se quiere colocar la tabla en el documento.
Pues esto es todo lo necesario para crear una tabla, realmente sencillo y como se puede observar, la tabla se ve muy bien.
Ventanas
Para finalizar con este tutorial voy a mostrar como crear ventanas con toda la funcional necesaria.
Crear ventanas es muy sencillo, simplemente se ahce algo como esto:
win.show();
La clase Ext.Window es la responsable de crear una ventana totalmente configurable, en este ejemplo únicamente se le esta especificando las dimensiones y el título, pero también se puede configurar si se quiere que la ventana no se cierre, o que no se pueda redimensionar y muchas otras cosas mas que recomiendo y se vea el api para poder jugar con estas propiedades.
Es importante mencionar que con el método show se muestra la ventana, de lo contrario no se verá nada.
Conclusión
En este tutorial simplemente he mostrado algo de lo que se puede hacer con esta maravillosa librería, realmente que es sencillo y rápido desarrollar aplicaciones complejas.
Espero que esta corta introducción le pueda servir a mas de uno, y si tienen algún comentario o duda la pueden dejar en el formulario inferior de esta misma página, como parte complementaria al tutorial se puede descargar los archivos de ejemplo.
4 Respuestas para este tema
carlos
Tuesday, March 25, 2008, 9:49 pm
ya habia escuchado hablar sobre esta libreria,pero tambien he leido algo sobre que este framework no es del todo libre, que hay que pagar una licencia o algo asi….que sabes tu sobre eso????….
Crysfel
Wednesday, March 26, 2008, 11:45 am
Hola carlos, tienes razón, Ext Js tiene tres tipos de licencia, tu escojes la que tu quieras dependiendo tus necesidades.
1.-Licencia comercial
2.-Licencia LGPL (Open source)
3.-Licencia OEM / Reseller
Para muchos el comprar la licencia les conviene mas pues la licencia LGPL tiene algunas restricciones, la licencia OEM de igual manera puede ser conveniente cuando se quiere desarrollar una libreria montada sobre Ext Js.
Si tienes alguna duda puedes visitar el siguiente link:
http://extjs.com/license
saludos 
LP
Thursday, May 29, 2008, 8:52 pm
me parece haber visto ese tutorial en algun lado xD