Ext JS es uno de los frameworks que ademas de flexibilizar el manejo de componentes de la página como el DOM, Peticiones AJAX, tiene la gran funcionalidad de crear interfaces de usuario bastante funcionales. El objetivo de estas líneas no es abordar en profundidad esta herramienta, sólo mostrar de manera rápida algunas de las características de Ext JS.
Para empezar, hay que disponer del framework disponible en el sitio web oficial de Ext JS: http://www.sencha.com/products/js/download.php (es importante leer los términos de licencia disponibles en http://www.sencha.com/products/license.php)
Uno de los elementos más importantes al trabajar con Ext JS es el "orden" en que deben ser incluidas las librerias para evitar problemas. He aqui un fragmento de código HTML que ilustra el orden en que deben ser agregadas. (No olvidar la hoja de estilos "ext-all.css" ya que contiene todos los estilos para visualizar correctamente los elementos)
Usuarios: 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Primeros pasos con Ext JS</title>
<!--IMPORTANTE AGREGAR LA HOJA DE ESTILOS -->
<link type="text/css" rel="stylesheet" href="common/ext/resources/css/ext-all.css" />
<script type="text/javascript" src="common/ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="common/ext/ext-all.js" ></script>
<script type="text/javascript" src="common/ext/src/locale/ext-lang-es.js"></script>
</head>
<body>
</body>
</html>
Se recomienda hacer pruebas usando Firefox con el complemento "Firebug", ya que éste facilita la depuración de errores en el código.
Por lo general, al iniciar con Ext JS, se aprecia una estructura común, ya que sobre ésta se construirán todos los componentes.
<script type="text/javascript">
Ext.onReady(function() { //se usa para inicializar los componentes en el momento adecuado
//IMPORTANTE: Esta propiedad se usa para "renderizar" correctamente los componentes
//por lo que debe ser incluia ANTES DE crear cualquier componente.
Ext.BLANK_IMAGE_URL = "common/ext/resources/images/default/s.gif";
Ext.QuickTips.init();
});
</script>
"Ext.onReady()" es una función que se usa para inicializar los componentes justo cuando el DOM ya ha sido cargado. Esto libera al programador de tener que implementar los eventos previos a la carga del DOM.
"Ext.BLANK_IMAGE_URL " es una propiedad que guarda la ubicacion de la imagen "Base" para renderizar los componente de UI. Si no se especifica, éstos componentes de Interfaz de Usuario tendrán comportamientos impredecibles.
"Ext.QuickTips.init()" inicializa los "quicktips" de algunos componentes como GridPanel, ComboBox, Toolbar, entre otros.
Todo inicia con el famoso "Hola Mundo". Y esta no es la excepcion, asi que veremos cómo crear un "WindowPanel" y dentro de él Mostrar esta Frase.
<script type="text/javascript">
Ext.onReady(function() { //se usa para inicializar los componentes en el momento adecuado
//IMPORTANTE: Esta propiedad se usa para "renderizar" correctamente los componentes
//por lo que debe ser incluia ANTES DE crear cualquier componente.
Ext.BLANK_IMAGE_URL = "common/ext/resources/images/default/s.gif";
Ext.QuickTips.init();
var mi_ventana = new Ext.Window({
renderTo: Ext.getBody(), //crear el componente en el body del documento
id: 'mi_ventana',
name: 'mi_ventana',
layout: 'form', //IMPORTANTE: Espefica el "diseño" de los elementos hijos
width: 250,
height: 350,
title: "Saludos",
frame: true, //agrega un borde al componente.
html: "<p>Hola Mundo!</p>", //contenido del componente
draggable: true, //activar o desactivar el "arrastre"
resizable: true //activar o desactivar el reajuste de tamaño
});
mi_ventana.show(); // método para renderizar el componente
});
</script>
Veamos algunos de los elementos de Configuración del ejemplo anterior:
"renderTo": Recibe un elemento DOM o el ID de una capa para renderizar el componente dentro de éste elemento. Por lo general, para especificar que se va a usar el "body" del documento se usa "Ext.getBody()".
"id" y "name": Se usan para identificar el componente de manera que pueda accederse a él posteriormente. Si no se especifica, Ext JS le asignará un Id y un name automático. Por eso es ACONSEJABLE darle un id y un name apropiado. Para acceder a un componente se usa el método "Ext.getCmp('id_del_componente')"
"layout": Especifica el "Diseño" del componente. Si no se especifica esta propiedad, Ext JS la establecerá a "auto" por defecto. El "layout" determina la posicion de los elementos hijos dentro del componente. Asi por ejemplo, un "layout" establecido a "form" hará que todos los elementos hijos del contenedor aparezcan uno debajo del otro. Si por el contrario establecemos el "layout" a "column" los elementos hijos del contenedor aparecerán en columnas.
"width" y "height": Establecen el alto y el ancho del componente. Si no es establecen estas propiedades, Ext JS tomará los anchos y los altos de los elementos hijos para calcular cuán alto y ancho debe ser el contenedor. Si se quiere que el ancho y el alto se ajusten al espacio disponible, en su lugar se usan las propiedades "autoWidth: true" y "autoHeight: true".
"title": Establece el título del componente. Si se omite, el componente se dibuja sin la barra superior donde aparece el título.
"frame": Establece si el componente llevará un borde exterior de 1px. Si se omite, el valor por defecto es "false"
"html": Permite agregar un fragmento de Codigo HTML al cuerpo del componente. Si se omite, no se incluye nada dentro del cuerpo del componente.
"draggable" y "resizable": Establecen las funcionalidades de "Arrastrar" (drag) y "Redimensionar" (resize). Al posicionarse sobre la parte superior del componente, el puntero cambiará al puntero de arrastre. De igual forma si se posiciona el puntero sobre los bordes del componente, éste cambiará al puntero de reajustar adecuado. Por defecto estas propiedades están establecidas a "false".
Este fue un pequeño ejemplo de crear una ventana en Ext JS. Pero el potencial de esta herramienta va más allá de crear este tipo de componentes. A continuación el ejemplo para cerrar este artículo es un pequeño formulario.
<script type="text/javascript">
Ext.onReady(function() { //se usa para inicializar los componentes en el momento adecuado
//IMPORTANTE: Esta propiedad se usa para "renderizar" correctamente los componentes
//por lo que debe ser incluia ANTES DE crear cualquier componente.
Ext.BLANK_IMAGE_URL = "common/ext/resources/images/default/s.gif";
Ext.QuickTips.init();
//Crear el Contenedor del formulario
var my_form = new Ext.form.FormPanel({
renderTo: Ext.getBody(),
layout: 'form',
title: 'Registro de Usuarios',
id: 'my_form',
name: 'my_form',
frame: true,
autoWidth: true,
autoHeight: true,
labelWidth: 130, //el tamaño por defecto de las etiquetas de los campos del formulario
items: [ //la coleccion de los elementos hijos
{
xtype: 'fieldset', // esta es la forma abreviada de crear componentes
title: 'Informacion Basica',
items: [
{
xtype: 'textfield',
id: 'nombre',
name: 'nombre',
fieldLabel: 'Nombre de Usuario', //la etiqueta que acompaña al campo del formulario
anchor: '60%', // la longitud relativa al espacio disponible
allowBlank: false, //especifica si el campo puede o no estar vacio
vtype: 'alpha', //es una validacion establecida para el campo
},
{
xtype: 'textfield',
id: 'email',
name: 'email',
fieldLabel: 'Correo Electronico',
anchor: '60%',
allowBlank: false,
vtype: 'email'
}
]
}
]
});
});
</script>
"xtype": Es una novedosa propiedad para abreviar la creacion de componentes. Esto le facilita la tarea al desarrollador porque no es necesario "instanciar" mediante la sintaxis "new" cada componente que necesite ser creado. En su lugar, se puede abreviar el tipo de elemento a crear usando esta propiedad.
"anchor": Permite determinar la forma en que el elemento se "ancla" al contenedor cuando éste cambia de tamaño. En este caso, los componentes hijos ajustarán el "largo" en un 60% del largo del contenedor.
allowBlank: Esta propiedad establece si el campo puede estar o no vacío. Por defecto esta propiedad está establecia a "false". Cuando se establece a "true" y el campo queda vacío, se muestra resaltado en rojo y con un pequeño "tooltip" que advierte que ese campo es obligatorio.
vtype: Recibe un manejador de validación de campo. Ext JS tiene unas reglas de validacion por defecto, que son: "email" , "url", "alpha", "alphanum". Es posible tambien crear nuestras propias reglas de validacion. Si se omite esta propiedad, no se aplicará ningún tipo de validación al campo.
Este sólo fue un pequeño abrebocas del verdadero potencial que Ext JS brinda al desarrollo de aplicaciones web, y su manejo depende en gran medida de la práctica y el estudio que el desarrollador dedique para perfeccionar la técnica. Un gran recurso para consultar es la Documentacion de la api disponible en http://dev.sencha.com/deploy/dev/docs/. Otro recurso para consultar es la página de ejemplos (http://dev.sencha.com/deploy/dev/examples/) y los Foros (http://www.extjses.com/foros.html)
Puedes crear una entrada que consideres debería estar dentro de Un Vistazo a Ext JS.
