Ext.js es una completísima librería javascript destinada a crear entornos de aplicaciones webs complejos. Solo echando un vistazo a los ejemplos de su página ya nos hacemos una idea de lo que podemos conseguir con ella. A mi personalmente me parece ideal para crear entornos de administración complejos y dotarlos de una usabilidad decente.

El problema de Ext.js es que es una librería con una documentación un poco pobre -comparada con otros- y a mi gusto su uso es algo lento e incomodo comparado con jQuery. Por lo tanto, para mi solo tiene sentido usarla como un cargador de widgets complejos (que no es poco). Por suerte, Ext.js puede llamarse utilizando como base al propio Jquery. No es su uso por defecto, pero es totalmente funcional en este modo, lo que nos permite usarlo sin llegar nuestra página de varias librerías no relacionadas. Veamos como conseguir esa integración.

Descargar Ext.js

Lo primero es descargar la librería Ext.js. Se trata de un Zip que tiene mezclada la propia librería con documentación y ejemplos. No he encontrado -supongo que por novato- un sitio donde se indique cuales de esos archivos son realmente necesarios para hacer funcionar Ext.js. De momento tengo la seguridad de que el sistema funciona copiando las carpetas «adapter»,»pkgs»,»resources»,»src» y el archivo «ext-all.js». El resto, todo parece indicar que sea desechable para tus desarrollos.

Subimos el archivo a nuestro server. Para no liarnos yo recomendaría subirlo a la carpeta «js» de nuestro sitema y dentro de esta crear una carpeta «ext» donde alojar todos estos archivos. No va a ser del todo correcto, ya que también existen imágenes y css dentro de la carpeta, pero de esta forma no separamos el sistema de ext.js ni lo mezclamos con nuestros propios archivos.

Insertandolo en tu página

Tras esto ya podemos crear nuestra página web usando ext.js con el adaptater de jquery. Los llamados adapters no son otra cosa que la base que va a usar ext.js para iniciarse. Así que usaremos el adapter de jquery y luego cargaremos Ext. Cargamos Jquery desde la Api de librerías AJAX de Google para no seguir liando el tema con archivos. También cargaremos Jquery UI para que quienes suelan usarlo para conseguir efectos no lo echen de menos.

El orden de la carga es muy importante: No podemos cargar Ui antes que jquery. Tampoco podemos cargar el adapter de jquery antes de Jquery ni el archivo ext-all antes del adapter. Como se ve, también cargamos los respectivos css de UI y de Ext.js.

Un primer ejemplo de uso

Tras incluir esto en el head de nuestra página ya podremos usar Ext.js, Jquery y Jquery UI a nuestro antojo.

Puedes ver un ejemplo del uso de ambas librerías en esta página:

• Ejemplo de Uso de Ext.js y Jquery a la vez

Lo que hemos hecho, ha sido simplemente incluir el siguiente código javascript en la página:

// Llamada a Document Ready de Jquery
$(document).ready(function () {

// Creando la ventana de Ext.
extWindow = new Ext.Window({
 layout:'fit',
 title : 'Soy una ventana lanzada con Ext.js',
 width:500,
 height:300,
 closeAction: 'hide',
 closable : false,
 plain: true,
 html: "
Puedes moverme o cerrarme cuando quieras
",
 buttons: [{
  text: 'Cerrar',
  handler: closeExtWindowAndLaunchUiDialog
 }]
});

// Lanzamos su apertura:
extWindow.show(extWindow);

}); // Fin del document.ready().

// Accion asociada a cerrar la ventana de Ext, que además crear un dialog de Jquery UI
var closeExtWindowAndLaunchUiDialog = function () {
 extWindow.hide();
 $('
También puedes moverme o cerrarme y ya no saldrán más ventanas ;)
').dialog({
  title:'Y yo una lanzada con Jquery UI',
  width:500
 });	
}

Para terminar de comprenderlo puedes consultar el uso del objeto window en la api de Ext.js y del método dialog de jquery UI.

Y con esto acabo de momento. Colgaré algún ejemplo más de Ext.js y Jquery pero no demasiados que no quiero llenar el blog con material que ya está disponible en otros sites.