Templates y Temas para ExtJS y Sencha Touch Bleext!
Bleextop! un desktop OpenSource para Ext4 y CodeIgniter http://bit.ly/pUwLJO
Alguna idea para hacer un cargando antes de ExtJS?
  • Vote Up0Vote Down JALFJALF November 2010
    Posts: 15
    Hola amigos
    Bueno estoy avanzado a buen ritmo con esto de ExtJS poco a poco voy comprendiendo cositas y voy haciendo mis ejemplitos para dejarlos como apuntes :)

    Pero veo que cuando vamos creando una aplicación bien robustica, veo que cada ves se demora un poco más el ExtJS en cargar todo y lógicamente para un trabajo final me parece que se ve algo maluquito todo eso.

    Me gustaría poder hacer un cargando... al estilo el correo de gmail que muestra una barra de cargando y que esta es real, cuando llega al final muestra ya todo su entorno ¿me comprenden? o como por ejemplo cuando entramos a las APIs de ExtJS http://dev.sencha.com/deploy/dev/docs/ que muestra una imagen de cargando y que a pesar que esta no hace un % de cargando, cuando la imagen desaparece ya está cargado realmente las librerias que se van a utilizar y todo renderizado.

    ¿alguien me puede dar alguna idea o me puede ayudar en este punto? de ante mano muchas gracias a quien me pueda colaborar :)

    Salu2
  • 9 Answers sorted by
  • Vote Up1Vote Down pasblinpasblin December 2010
    Posts: 182
    La forma en que yo lo hacía antes de cargar los javascript de manera dinámica era .
    creaba un div html con un gif preloader y un texto que ponia iniciando.
    Y luego entre cada carga de javascripts cambiaba ese texto y en el onready de extjs ocultaba el div.
    ejemplo


    <!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">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
    <title>Gestor Web</title>
    <link rel="stylesheet" type="text/css" href="css/admin.css">
    </head>
    <body>
    <div id="preload" style="width:100%;height:100%;z-index:50000;">
    <div id="loadBox" class="loadBox" >
    <img src="imgs/gifinicio.gif" alt="cargando" />
    <p id="loading-msg"></p>
    </div>
    </div>
    <div id="aviso"><img src="imgs/ajax-loader.gif" alt="cargando.."/> Cargando modulo..</div>
    <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando Núcleo...';</script>
    <!-- <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"> -->
    <link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all-notheme.css" />
    <link rel="stylesheet" type="text/css" href="ext/resources/css/xtheme-gray-extend.css" />
    <script type="text/javascript" src="ext/adapter/jquery/jquery.js"></script>
    <script type="text/javascript" src="ext/adapter/jquery/ext-jquery-adapter.js"></script>
    <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Cargando componentes...';</script>
    <script type="text/javascript" src="ext/ext-all.js"></script>
    <script type="text/javascript" src="ext/src/locale/ext-lang-es.js"></script>
    <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Inicializando...';</script>
    <script type="text/javascript" src="example.js.js"></script>
    <script type="text/javascript" src="example.js.js"></script>
    <script type="text/javascript">
    Ext.onReady({
    var loading = document.getElementById('preload');
    loading.parentNode.removeChild(loading);
    .........
    });
    </script>
    </body>
    </html>


    es algo asi mas o menos te lo he escrito a lo bruto pero es para que veas la idea ;) porque el efecto ed way ;)
  • Vote Up0Vote Down tierrararatierrarara November 2010
    Posts: 70
    muy importante tu punto :D

    baja los ejemplos de bindows.com, ellos tiene ejemplos sobre eso solo con javascript tal vez te puedas guiar por allí para hacer el arrangue de tu app, igual extjs tiene tambien alguno cuando cargas el api
  • Vote Up0Vote Down JALFJALF November 2010
    Posts: 15
    Gracias por tu respuesta, voy a echarle un ojito a eso a ver :)
    yo por mi parte creo que lo resolví pero...... de una forma.... poco ortodoxa, miralo y en mirar el codigo de la página te das cuenta de lo que hice jajajajajajjaja

    puse un div con z-index 9999 y despues de un segundo le di que se desvaneciera en oready o algo así jajajajajajajajaj

    http://www.velfig.com/labs/index.php
    admin admin

    Salu2
  • Vote Up0Vote Down tierrararatierrarara November 2010
    Posts: 70
    no puedes poner un tiempo fijo, por que si la red se satura y se tarda mas. eso estoy seguro que lo puede colocar en el onready de tu pagina principal.

    algo como lo que tu tienes pero que se desactive en el onready, no por que pasa un tiempo
  • Vote Up0Vote Down tokkaidotokkaido November 2010
    Posts: 395
    algunos componentes tiene un parámetro loadMask que puedes utilizar. Me permites un consejo? la mejor manera de trabajar es separando los componentes en archivos de interface (digamos ui) y aplicar los eventos en otro archivo separado. desde mi punto de vista la mejor manera de aprender a trabajar asi es descarga el ExtDesigner, que de prueba te dura unos dias pero con un truquillo... ,), y lee los pdf de ayuda de este, con poco estudiar como separa las cosas te ayuda un montón. por mi parte yo separo los mycomponente.ui.js en una carpeta, los store mystore.js en otra y mis componentes con eventos en la raíz, algo así:

    --/js/
    ---myCompras.js
    ---myVentas.js
    --/js/ui/
    ---myCompras.ui.js
    ---myVentas.ui.js
    --/js/st/
    ---stCompras.js
    ---stVentas.js

    veras que una estructura así te será muy útil cunado tienes ochorrocientos archivos

    ademas te darás cuenta que muchos componentes son similares y podrás utilizar el código sin muchos cambios, por ejemplo en mi BD tengo varias tablas que son parámetros del tipo

    id/descripcion

    por lo que uso un script myParametro.ui.js
    y modifico un myCuentas.js para que use el script anterior.

    ME ha simplificado la vida no te imaginas cuanto

    suerte
  • Vote Up0Vote Down JALFJALF December 2010
    Posts: 15
    Hola a todos
    Respondo algo tarde porque no le había puesto a este hilo notificación por correo :P

    Bueno les cuentos que para el "Cargando...", si es una imagen pero que se desactiva en onReady ;)

    Lo otro que me comenta tokkaido, si es verdad, utilizo ExtDesigner y separo la GUI de la parte donde le pongo los eventos, como si se tratase de MVC.

    Y pues hago cargas dinámicas para no cargar todo desde el principio. Mi estructura es la siguiente.
    css/
    images/
    js/
    --librerias/
    ----ext-3&#46;3&#46;0/
    ----phpjs/
    --modulos/
    ----moduloejemplo/
    ------gui&#46;js
    ------controlador&#46;js
    ----CargarModulos&#46;js
    --precargaimagenes&#46;js&#46;php
    uploads/
    index&#46;php
    login&#46;php
    logout&#46;php
    Cualquier critica buena o mala, sirve como aporte :) gracias
  • Vote Up0Vote Down JALFJALF December 2010
    Posts: 15
    Hola pasblin
    Gracias por la idea, algo así se me había ocurrido, lo voy a pulir y vemos a ver que tal ;) cualquier cosa estoy comentando, gracias por la ayuda :)
  • Vote Up0Vote Down pasblinpasblin December 2010
    Posts: 182
    ok espero que te sirva ;)
  • Vote Up0Vote Down CrysfelCrysfel December 2010
    Posts: 897
    De hecho, si le das un vistazo al código fuente de la documentación oficial, veras que utilizan el mismo concepto, en el onReady ocultan la capa de cargando una vez que han renderizado los componentes principales. Luego van cargando bajo demanda la documentación.

    Saludos
Add a Comment

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Login with Facebook Sign In with Twitter

Sign In Apply for Membership

Categories

In this Discussion

Poll

No poll attached to this discussion.