Do not speak Spanish? Read this post in English.

Domingo, 20 d junio d 2010.

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.

<head>
<title>Ejemplo de Uso de Ext.js y Jquery a la vez</title>
<!-- CARGA DE JQUERY y JQUERY UI -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/themes/base/jquery-ui.css" type="text/css" media="all" />

<!-- CARGA DE EXT.JS -->
<script type="text/javascript" src="/js/ext/adapter/jquery/ext-jquery-adapter.js"></script>  
<script type="text/javascript" src="/js/ext/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="/js/ext/resources/css/ext-all.css" />
</head>

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: "<p>Puedes moverme o cerrarme cuando quieras</p>",
 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();
 $('<div id="dialog">También puedes moverme o cerrarme y ya no saldrán más ventanas ;)</div>').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.

Temas Relacionados: jquery tutoriales

Autor:

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

  1. Wilmer dice:

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

  2. Silverio dice:

    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!!!

    • ikhuerta dice:

      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. Juan dice:

    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. Belen dice:

    Hola, tienes idea de como poner a un menu en jquery en un panel de ExtJs

  5. €quiman dice:

    Alguno sabe de donde puedo bajar el Theme Blue de Ext pero para jQuery???

  6. M Vergara dice:

    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

  7. ikhuerta dice:

    Prueba con Jquery Easy UI:

    http://www.jeasyui.com/

    Es una copiada de Ext en jquery y libre, aunque no lo tiene todo, si tiene lo suficiente para hacer muchas herramientas.

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title