Que son los adapters y en que me beneficia

ExtJS and Sencha Touch Themes and Templates

Que son los adapters y en que me beneficia

Feb 16, 2009 | Español | By Crysfel | 30 Comments | Read in English

El patrón Adapter (Adaptador) se utiliza para adecuar una interfaz de tal forma que pueda ser utilizada por una clase que de otro modo no se podría utilizar.

Que son los adapters y en que me beneficia

Author: Crysfel

I'm a software developer with 6+ years of experience, when I'm not developing software I may be writing a tutorial, you can follow me on twitter

Download Demo

Librerías

Gracias a que Ext JS nació como una extensión para la librería YUI y debido a la buena estructura del framework, ahora podemos ejecutar Ext JS sobre otras librerías.

Las implementaciones que existen en la actualidad de este patrón (adapter) son para la librería de jQuery, Prototype y YUI, además Ext JS cuenta con su propia librería la cual se llama Ext-base. Los adapters los encontramos en el directorio ext-2.2/adapter.

Instalación

Para instalar la librería deseada simplemente es necesario importarla al documento, inmediatamente después importar el adapter y por ultimo importar el framework de Ext JS, a continuación un ejemplo de cómo instalar jQuery.

<script type="text/javascript" src="../ext-2.2/adapter/jquery/jquery.js"></script>
<script type="text/javascript" src="../ext-2.2/adapter/jquery/ext-jquery-adapter.js"></script>
<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>

Pruebas

Para probar que se ha instalado correctamente la librería de jQuery, es necesario escribir código de jQuery para que sea ejecutado. Podemos probar la instalación de jQuery al cambiar el evento onReady de Ext JS al estilo jQuery.

$(function(){
         $(document.body).css('background-color','#ccc');
         var win = new Ext.Window({
                   title:'Hello world',
                   width:400,
                   height:300,
                   minimizable:true,
                   maximizable:true
         });
         win.show();
});

Otra prueba más que se puede hacer es cambiar el color de fondo del body. Esto se puede realizar con jQuery fácilmente, solo basta con agregar esta línea dentro del evento ready.

$(document.body).css('background-color','#333');

Conclusiones

Como se ha mostrado, es muy sencillo instalar la librería que más nos guste, además de que Ext JS se comporta igual con cualquiera de éstas.

Durante el resto del curso utilizaremos Ext-base, que es la librería propia de Ext JS, pero cada quién puede utilizar la librería de su agrado o la que mejor conozca.

30 Responses to “Que son los adapters y en que me beneficia”

matt Feb 16, 2009

eso significa que si importo la librería extjs y jquery sin incluir el adapter, jquery no funcionaría?

Reply
- Crysfel Feb 16, 2009
  
  No, jQuery si te funcionaría, lo que no funcionaría sería el framework de Ext JS, esto es por que Ext JS requiere una librería para trabajar sea jQuery, prototype, YUI o la propia de Ext JS el ext-base.
  
  Ext JS fué pensado para ser una extensión de YUI (Yahoo User Interface), por lo tanto con el adapter necesario se puede quitar YUI y poner jQuery o prototype, o si no quieres usar ninguno de esos puedes usar el propio de Ext JS, el ext-base lo podriamos comparar con jQuery o prototype, librerías para el manejo del DOM, selecciones, manejo de estilos, etc…
  
  Saludos
Roberto May 21, 2009

Por lo que veo entonces no se puede trabajar con otra librería fuera de las que tienen sus adapters?, por ejemplo motools….que recién estaba aprendiendo

Reply
- Crysfel May 21, 2009
  
  Si se puede utilizar mootools y Ext o la librería que quieres, lo que no es posible es que Ext JS utilice mootools para desplegar los componentes, lo que harías sería incluir el ext-base.js y las librerías que tu quieras.
Bladimir Balbin Aug 28, 2009

inicie anoche con los tutoriales hoy cuando vimos los adapter el ejemplo no me funciono, no se si tiene que ver la version de Ext JS, pero no me funciono me puse a revisar a ver que faltaba y la libreria jquery no esta en el directorio adapter. la version que instale es Ext-2.3

Reply
alex Sep 04, 2009

en la version 2.3.0 no encuentro el jquery.js ya lo busque manualmente y no aparece que alternativa me dan por que crei que venia englobado en el ext-jquery-adapter.js pero no por que tampoco me corre… saludos

Reply
bacca Nov 29, 2009

A mi tampoco me funcionaba pero es un error que se resuelve cambiando de orden la inclusion de los scripts.

Ademas hay que bajar jquery y colocarlo en un sitio visible dentro del servidor web.

Aqui adjunto el codigo :

$(function(){
$(document.body).css(‘background-color’,'#ccc’);
try{
var win = new Ext.Window({
title:’Hello world’,
width:400,
height:300,
minimizable:true,
maximizable:true
});
win.show();
}catch(e){
alert(e);
}
});

Reply
- bacca Nov 29, 2009
  
  Me falto el orden en el header
- bacca Nov 29, 2009
  
  Quiten los comentarios de xml
  
  <!–
  
  –>
- bacca Nov 29, 2009
  
  Perdon pero esta pagina no me deja colocar los headers. Siempre me los borra.
cristhian Feb 18, 2010

Muchas gracias, ante todo, este ejemplo de los adapters no me funciona. He bajado la version 3.1.1 de Ext js, no sé si sea ese el problema, tampoco encontre el archivo jquery. Talvez el error esta en que el adapter funciona para una determinada versión. Espero alguna indicación, saludos.

Reply
- Crysfel Feb 19, 2010
  
  Es verdad, en la versión 3.1.1 ya no viene la librería de jQuery, pero esa la puedes obtener desde su página oficial, luego incluye el adapter y listo debería funcionar correctamente.
  
  saludos
- Bachsmann Feb 24, 2010
  
  asi es yo tuve que bajar el jquery.js
  de el sitio oficial http://code.jquery.com/jquery-1.4.2.js
  
  lo copio en el directorio y funciono super..
cristhian Feb 18, 2010

Sorry, corrio… un problema de código. Esto demuestra que puede usarse cualquier versión de jquery. Aprovecho para preguntar:En la carperta Jquery del Adapter hay otro archivo, ext-jquery-adapter-debug.js, para qué sirve???
Saludos desde Perú!!

Reply
- Crysfel Feb 19, 2010
  
  Es el mismo código que el adapter normal, solamente que no esta comprimido, esto permite que pueda leerse el código y cuando sale un error podremos ver exactamente donde ocurrió, normalmente usamos este adapter cuando estamos en a fase de desarrollo.
  
  saludos
Pedro Apr 29, 2010

Asi quedaria con la nueva version jquery a dia de hoy:

Adapters

<script type="text/javascript" src="../ext-3.2.1/adapter/jquery/jquery-1.4.2.js"
<script type="text/javascript" src="../ext-3.2.1/adapter/jquery/ext-jquery-adapter.js"

$(function(){
$(document.body).css(‘background-color’,'#ccc’);

var win = new Ext.Window({
title:’Hello world’,
width:400,
height:300,
minimizable:true,
maximizable:true
});
win.show();
});

Reply
WALTER May 10, 2010

Hola alguen me podria ayudar estoy empezando con extjs y no entiendo como funciona me podrian explicar o dejar un ejemplo de ante mano les agadesco

Reply
- Crysfel May 12, 2010
  
  Te recomiendo navegar por el sitio, esta lleno de ejemplos y tutoriales
Ana A May 18, 2010

Buenas…
Quisiera saber donde descargo el material de apoyo correspondiente a esta clase, ya que no lo visualizo??

Reply
pattiya Jun 23, 2010

Chamo tu explicas muy bien gracias por el curso.

Reply
wilder Sep 15, 2010

hola para agradecerte los videotuoriales estan bien detallado bueno yo recien estoy empezando me esta saliendo perfectamente y me da mucha alegria que hay gente que comparte informacion gracias gracias

Reply
miguelmich Sep 30, 2010

Saludos, mi pregunta es como podría hacer algo como:
Ext.onReady(com.quizzpot.tutorial.Tabs.init,com.quizzpot.tutorial.Tabs);
con el adapter de jquery?? dentro del
jQuery().ready(function (){
???
});

Gracias de antemano

Reply
Miguel Angel Oct 20, 2010

Hola, agradesco por el curso estan muy buenos, quisiera saber si se puede poner fondo pero con el codigo de ext js

Reply
Wilfredo Victor Jan 14, 2011

Crysfel podrias poner a disposicion algun video tutorial integrando los adapter de jquery + ExtJS?

Gracias

Reply
Wilfredo Victor Jan 14, 2011

con un ejemplo donde aplicarlo

Reply
Wilfredo Victor Jan 14, 2011

Existe un plugin de autosugerencias de jquery.
¿La consulta es que si es posible integrar ese plugin para que funcione junto con extjs?

Reply
- Crysfel Jan 18, 2011
  
  Se puede integrar muy fácilmente, la pregunta es porque quedrías hacerlo? ExtJS cuenta con su propio AutoComplete que funciona bastante bien. Saludos
Wilfredo Victor Jan 26, 2011

Crysfel que enlace me recomiendas donde pueda orientarme con el autocomplete de extjs, por otro lado estoy utilizando los adapters ext-jquery-adapters.js, para utilizar un plugin masketinput de jquery. Inicie el proyecto en Linux y todo bien pero cuando quise correrlo en windows no sucede nada, me aparecen unos errores relacionados con jquery y aun no lo soluciono.

Reply
Ariel May 19, 2011

Hola, una pregunta de principiante, tengo que instalar una aplicación en Extjs en un server, pero cuando bajo el ExtJS de Sencha, no tengo el adapter (ext-base.js). Esto donde lo consigo?? No debería estar en el paquete descargado? Es de principiante…. Muchas gracias

Reply
Belen Jul 13, 2011

Hola, podrias mandarme un ejemplo de ExtJs 4 con jquery?
Tengo un viewport hecho en ExtJs 4.. y en una zona del viewport quiero poner un menu hecho en jquery.

Reply