Problemas con ExtJs4 y jQuery juntos.

cristian_cena · #1 (**permalink**) 11/09/2011, 19:06

Hola compañeros,
Comentarles que estoy intentando crear mi primer hola mundo en ExtJs.
Leí que Ext permite trabajar con algunos frameworks como base, entre ellos jquery.
Ví algunos artículos en donde decían de usar un archivo llamado ext-jquery-adapter.js
pero según seguí leyendo entendí que en Ext 4 ya no hace falta incluir un adapter sino que ya biene incorporado.

Este es el código que tengo:

Código HTML:

Ver original<!-- busco el theme  -->
<link rel="stylesheet" type="text/css" href="../../ext-4.0.2a/resources/css/ext-all.css" /> 
 
<!-- incluyo jquery desde el cdn de google-->
<script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
 
<!--incluyo extJs  -->
<script type="text/javascript" src="../../ext-4.0.2a/ext-all.js"> </script> 
 
<!- uso el método ready() de jquery y coloco adentro el código extJs  -->
<script type="text/javascript"> 
$(function(){
    var win = new Ext.Window({
        title:'Hola mundo',
        width:250,
        height:250,
        minimizable:true,
        maximizable:true
    });
    win.show();
});
</script>

Y este es el resultado: Se rompe el diseño. Cuando hago un resize sobre la caja vuelve a la normalidad lo que hace pensar que no se esta integrando bien jquery.

si en lugar de usar jquery escribo ...

Código Javascript:

Ver originalExt.onReady(function(){
        var win = new Ext.Window({
            title:'Hola mundo',
            width:250,
            height:250,
            minimizable:true,
            maximizable:true
        });
        win.show();
    });

... se soluciona el problema.

En la consola de firebug encuentro estos dos errores:

¿Estaré incluyendo mal jquery?, ¿pasé algo por alto?
Desde ya agradezco su respuesta.
Un saludo.

Aijoona · #2 (**permalink**) 12/09/2011, 06:22

Tenés el html completo en algún lugar?

cristian_cena · #3 (**permalink**) 12/09/2011, 07:00

Hola Aijoona, si, es este:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <title>Adapters?</title> 
 
    <link rel="stylesheet" type="text/css" href="../../ext-4.0.2a/resources/css/ext-all.css" /> 
 
    <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js"></script> 
    <script type="text/javascript" src="../../ext-4.0.2a/ext-all.js"> </script> 
 
    <!--  uso el método ready() de jquery y coloco adentro el código extJs  -->
    <script type="text/javascript"> 
    $(function(){
        var win = new Ext.Window({
            title:'Hola mundo',
            width:250,
            height:250,
            minimizable:true,
            maximizable:true
        });
        win.show();
    });
    </script> 
 
</head> 
 
<body>
</body> 
</html>

alexg88 · #4 (**permalink**) 12/09/2011, 09:52

Mira esta página:

http://blog.ikhuerta.com/usando-extjs-y-jquery-a-la-vez

Aijoona · #5 (**permalink**) 12/09/2011, 10:03

Usar los adapters es algo a evitar en lo posible.

Personalmente en este momento estoy con un proyecto que utilizaba hasta hace muy poco jQuery UI y ExtJS.

Tuve algunos problemas con el css-scoped, pero sacando eso anda de 10.

cristian_cena · #6 (**permalink**) 12/09/2011, 10:54

@alex88, estube viendo esa página, ahí trabajan con Ext 2, en la versión 4 no viene más la carpeta ext/adapter/... por lo que alcanzé a leer (en ingles :S) ahora se incorpora en ext-all.js para que tome a jquery, mootools, prototype, etc.

@aijoona. bueno tal vez no deba forzar para que cargue con jquery, de todos modos puedo seguir usando jquery para otras cosas. Me adapto a la sintaxis de ext y listo. Nada mas me parecio raro que se rompan los estilos, seguramente el metodo onReady de ext trabaja algo diferente que el onReady de jquery.
Prové con las distintas variantes de ...scoped.css pero no camina :)

Gracias por sus respuestas.