Que son los adapters y en que me beneficia Más videos
Descripción del tema
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.Te gustaría recibir más tutoriales como este en tu correo?
Este tutorial pertenece al curso Aprendiendo Ext JS 3, te recomiendo revises el resto de los tutoriales ya que están en secuencia de menor a mayor complejidad.
Si deseas recibir más tutoriales como este en tu correo te recomiendo registrarte al curso, si ya eres miembro solo identifícate y registrate al curso, si no eres miembro te puedes registrar gratuitamente!
Si no gustas registrarte en este momento no es necesario! Aún así puedes recibir los nuevos tutoriales en tu correo! Jamás te enviaremos Spam y puedes cancelar tu suscripción en cualquier momento.
Instructor del curso
Regístrate a este curso
Este tutorial pertenece al curso Aprendiendo Ext JS 3, revisa todos los tutoriales que tenemos en este mismo curso ya que están en secuencia y van de lo más sencillo a lo más complicado.
Tendrás acceso a descargar los videos, códigos y material adicional.
Podrás resolver los ejercicios incluidos en el curso así como los Quizzes.
Llevarás un registro de tu avance.
31Comentarios
eso significa que si importo la librería extjs y jquery sin incluir el adapter, jquery no funcionaría?
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 <strong>extensión</strong> 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 <strong>ext-base</strong> lo podriamos comparar con jQuery o prototype, librerías para el manejo del DOM, selecciones, manejo de estilos, etc... Saludos
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
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.
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
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
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); } });
Me falto el orden en el header
Quiten los comentarios de xml <!-- -->
Perdon pero esta pagina no me deja colocar los headers. Siempre me los borra.
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.
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ú!!
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
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
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..
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(); });
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
Te recomiendo navegar por el sitio, esta lleno de ejemplos y tutoriales
Buenas... Quisiera saber donde descargo el material de apoyo correspondiente a esta clase, ya que no lo visualizo??
Chamo tu explicas muy bien gracias por el curso.
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
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
Hola, agradesco por el curso estan muy buenos, quisiera saber si se puede poner fondo pero con el codigo de ext js
Crysfel podrias poner a disposicion algun video tutorial integrando los adapter de jquery + ExtJS? Gracias
con un ejemplo donde aplicarlo
Existe un plugin de autosugerencias de jquery. ¿La consulta es que si es posible integrar ese plugin para que funcione junto con extjs?
Se puede integrar muy fácilmente, la pregunta es porque quedrías hacerlo? ExtJS cuenta con su propio AutoComplete que funciona bastante bien. Saludos
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.
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
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.
Gracias, a todos, descargando el jquery -1.4.2 ya me funciono!