Usando Ext.js y Jquery a la vez


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.


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






  



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:

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.


9 respuestas a “Usando Ext.js y Jquery a la vez”

  1. Hola quiero empezar con extJS y quisiera si me pudieran enviar algun tutorial o ejemplo sencillo de esta framework

  2. Hola amigo, muy bueno tu artículo.
    Una pregunta… ¿tienes idea de cómo combinar un componente de jquery dentro de un panel de ExtJS?
    En este caso quiero usar un panel de ExtJS pero como uno de sus items poner un treepanel hecho en jquery… pero no logro avances.
    Saludos y gracias!!!

    • Hace un tiempo de este post. De hecho tenia un post preparado para mostrar un panel y llenarlo con jquery pero no llegue a publicarlo. Buscare a ver…

      Ahora mismo No te puedo responder con casos concretos pero sencillamente: busca una forma de identificar tu nuevo panel al crearlo. Si no recuerdo mal podías indicar tu mismo los id de las piezas que creees. A partir de ahí lanza jquery buscando el div concreto del panel y ya est. Quizás te ayude ver las clases creadas con webdeveloper….

  3. Que buen post!

    Tengo una duda enorme, ExtJs es gratis? es decir la licencia me permitiría usarla en una aplicación comercial sin distribuir el código fuente? o debo pagar por ella para que no tenga que hacerlo?…

    Gracias

  4. Buen post, ambas librerías son super útiles.
    Me gustaría saber si conoces alguna librería que se parezca gráficamente a ExtJS (la cual no podré utilizar debido a temas de licencia) para trabajar con jQuery. Es decir, quiero lograr una interfaz con menú y tabs como las clásicas de Ext, pero sin utilizarla. Gracias

Responder a Wilmer Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *