Buenas amigos, tengo por lo menos unos 100 archivos js añadidos al index principal, que componen unos 40 modulos, estos estan estructurados como lo propone el extjs designer. Me di cuenta que la primera vez que se carga el sistema se crean 4.1 mb de cache y segun la pestaña red de firebug se ejecutan 285 peticiones nada mas para cargar en el index la primera vez. Cuando esta montada en internet es muy lento para abrir la primera vez, luego funciona un poco más rápido. Mi pregunta es existe alguna forma de cargar los archivos js bajo demanda?

Lo otro es que el menu, esta hecho en varios treepanel, cuatro especificamente, los cuales estan dentro de un acooridion, existe una forma de detectar cuando se activa un pestaña del acoordeon?. Esto es porque cuando lo estaba haciendo no consegui forma de detectar ese evento y deje que hiciera una peticion por cada tree, esto se hace cada vez que se carga la pagina y hace que sea más lento la carga del sistema.

Agradeceria cualquier información que me pueda ayudar a mejorar esta situación.

Alguna idea? Lei que en extjs 4 no es necesario llamar a los archivos js en el index, pues que maneja una estructura de archivos muy especifica y define una nueva forma de crear las clases y llamar los objetos. Hay alguna forma de solucionar este problema con extjs 3 o tendria que migrar a la versión 4 para solucionar el problema?

en lo personal el sistema que diseñé y sobre el que trabajo tiene mas de 100 modulos, pero los cargo en pestañas dentro de la region center de un viewport con IFrame, de esa manera solo se cargan aquellos sobre los que estoy trabajando y ademas se pueden cerrar de manera que se libera memoria

con respecto a las pestañas del acordeón, a que te refieres con "activar"?, porque puedes controlar los eventos beforeexpand y expand, es decir antes de que se despliegue el panel y una vez desplegado o lo que quieres es detectar el evento del mouse en esa pestaña?.

Yo hago algo parecido a lo que tu tienes, la funcionalidad es similiar, excepto que yo no uso lo iframe, que si mal no recuerdo fue una recomendación que me hiciste hace tiempo, pero la verdad en ese momento estaba muy perdido con la herramienta y no lo supe hacer.

Tengo una duda si usas los iframe no tienes que agregar la ruta de los archivos js al index? Porque realmente mi problema radica ahi, que yo añado todos los js al index, pero creo las instancias de las clases al momento que se necesiten, el problema es que mucho despues me di cuenta de que todos esos archivos asi no los estes usando se descargan al cliente y hace que sea demasiado extenso el tiempo de carga de la pagina.

Con respecto a lo del acordeon eso que me dices puede servir, tengo que probarlo, la idea es que solo se muestre el tree del panel que se ve al unicio y que los demas se vayan cargando a medida que se necesiten (activen), para que no extiendan el tiempo de carga de la pagina.

No necesitas colocar todos los js en el index porque cada iframe lo que hace es cargar una pagina completa con su propio html y js lo que ademas me permite probar los modulos por separado. Mañana cuando este en la oficina te enviaré un archivo de documentacion que tengo con respecto a como lo hago aunque esta algo incompleto aun creo que te puede servir. Puedes usar los eventos que te menciono en los paneles al cargar Los treepanel en el evento beforeexpand

En el archivo que te adjunto puedes encontrar algo de la estructura pero como te menciono no está actualizada porque no me he dado el tiempo de hacerlo, por ejemplo una de las cosas que cambié desde que hice ese archivo es la funcion para la carga de los modulos desde su html respectivo, antes lo hacia asi:

Código: Seleccionar todo

<script type="text/javascript">
      Ext.ns('app.contable');
      Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
      Ext.onReady(function() {
        Ext.QuickTips.init();
        app.contable.modProveedores = new adm_proveedores({
          renderTo: Ext.getBody()
        });
        app.contable.modProveedores.show();
        setTimeout(function(){
          Ext.get('loading').remove();
          Ext.get('loading-mask').fadeOut({remove:true});
        }, 250)
      });
    </script>


despues me di cuenta que podia crear una funcion en mi archivo funciones.js (que es donde guardo aquellas funciones transversales que voy a ocupar en varios modulos) de la sgtre manera de tal forma que reducia la cantidad de lineas y que me permitia efectuar cambios mas rapidamente:

Código: Seleccionar todo

<script type="text/javascript">
      load_modulo('contable','adm_proveedores');
  </script>


ya que en mi funciones.js tengo:

Código: Seleccionar todo

function loading_mask(){
  Ext.get(document.body).update('<div id="loading-mask" style=""></div><div id="loading"><div class="loading-indicator"><img src="../images/large-loading.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Cargando...</div></div>');
}

function remove_loading_mask(){
  setTimeout(function(){
    Ext.get('loading').remove();
    Ext.get('loading-mask').fadeOut({remove:true});
  }, 250);
}
function load_modulo(modulo, submodulo, base){
  loading_mask();
  Ext.ns('app.'+ modulo);
  Ext.onReady(function() {
    if (!Ext.isDefined(base)){
      app[modulo]['mod_' + submodulo] = new window[submodulo]();
    } else {
      app[modulo]['mod_' + submodulo] = new parametros({
        base: base 
      });
    }
   
    remove_loading_mask();
  });
}


con esta estructura lo que hago es tener una tabla en mi base de datos que contiene la estructura del menu que cargo en mi treeloader y el campo text del arbol, cuando se trata de una hoja (leaf) del arbol lo cargo a traves de IFrame, de la sgte manera:

Código: Seleccionar todo

desktop = Ext.extend(desktopUi, {
  initComponent: function() {
      usuario = {};
    desktop.superclass.initComponent.call(this);
      
      Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent,{
         onRender: function (ct, position){
            this.el = ct.createChild({tag:'iframe', id: 'iframe-'+ this.id, frameBorder:0, src:this.url});
         },
         listeners : {
            beforerender : function(c){
               Ext.getCmp(c.id).getEl().mask('Cargando modulo....', 'x-mask-loading');
            },
            afterrender : function(c){
                  setTimeout("Ext.getCmp('"+c.id+"').getEl().unmask();",1000);
            }
         }
      });
      this.getEl().on('contextmenu', this.btn_derecho, this);
      this.on('beforerender', this.leer_variables, this);
    this.on('afterrender',this.cargar_usuario,this);
    this.on('afterrender',this.cargar_inicio,this);
    this.btn_usuario.on('click',this.info_usuario,this);
    this.btn_logout.on('click',this.desloguear,this);
    this.tree_menu.on('click',this.cargar_modulo,this);
    this.tree_menu.on('beforeload',this.logeado,this);
    this.btn_refrescar.on('click', this.refrescar_menu, this);
  },
   leer_variables: function(){
            
   },
   btn_derecho: function(e){
      e.stopEvent();
   },
  refrescar_menu: function() {
    this.tree_menu.getRootNode().reload();
  },
  info_usuario: function() {
   
      this.winUsuario.show();
  },
  cargar_inicio: function(){
    this.tab_contenido.load({url: '../app/inicio.html', scripts: true, scope: this});
  },
  cargar_usuario: function(){
    Ext.Ajax.request({
         scope: this,
         url: '../php/leer_usuario.php',
         success: function(response){
            info = Ext.decode(response.responseText);
        if (info.success){
          user = 'Usuario: <b>'+info.usuario[0].nombre+'</b>';
          this.btn_usuario.setText(user);
        } else {
           Ext.MessageBox.show({
            title : 'ERROR',
            msg : info.errors.razon,
            icon : Ext.MessageBox.ERROR,
            buttons : Ext.MessageBox.OK
          });
        }
            window.usuario.nombre = info.usuario[0].nombre;
            window.usuario.email = info.usuario[0].email;
            this.winUsuario = new info_usuario({
               email:info.usuario[0].email,
               usuario:info.usuario[0].nombre,
               height:150
            });
         },
      failure:function(response){
        Ext.MessageBox.show({
          title : 'ERROR',
          msg : response.responseText.errors.razon,
          icon : Ext.MessageBox.ERROR,
          buttons : Ext.MessageBox.OK
        });
      }
      });
    window.salir = false;
    window.onbeforeunload = function(e){
      if (window.salir === false){
        textosalir = 'Al salir o refrescar perdera los cambios que no haya guardado';
        a = e || window.event;
        if (a) {
          a.returnValue = textosalir;
        }
        return textosalir;
      }
    };
  },
  desloguear: function(){
      Ext.Msg.show({
         title: 'Salir',
         buttons: Ext.MessageBox.YESNOCANCEL,
         msg: 'Esta seguro que desea salir del sistema?',
         icon: Ext.Msg.QUESTION,
         fn: function(btn){
            if (btn == 'yes'){
               window.salir = true;
               Ext.Msg.wait('deslogueando... ','Por favor espere');
               Ext.Ajax.request({
                  url: '../php/logout.php',
                  callback: function(){
                     window.location = '../index.html';
                  }
               });
            }
         }
      });
   },
  cargar_modulo: function(nodo, e) {
    if(nodo.id!='raiz'){   
      if (nodo.attributes.leaf == '1') {   
        var open = !this.tp_contenido.getItem(nodo.id);
        if(open){
          this.tp_contenido.add({
            title: nodo.text,
            id: nodo.id,
            iconCls:nodo.attributes.iconCls,
            items: [ new Ext.ux.IFrameComponent({ id: nodo.id, url: '../app/'+nodo.attributes.archivo+'.html', name: nodo.id}) ],
            loadScripts: true,
            autoScroll: true,
            closable: true,
            layout:'fit'
          }).show();
          return;
        }
        tab = this.tp_contenido.getItem(nodo.id);
        tab.show();
      }
    }
  },
   logeado: function(){
      Ext.Ajax.request({
         url: '../php/logeado.php',
         scope: this,
         success: function(response){
            info = Ext.decode(response.responseText);
            if (info.success === false){
               Ext.Msg.show({
                  title: 'ERROR',
                  msg: 'Ha sido deslogeado del sistema.<br>Necesita ingresar sus datos nuevamente!',
                  icon: Ext.MessageBox.WARNING,
                  buttons: Ext.Msg.OK,
                  fn: function(btn){
                     
                     var reLogin = new login();
                     reLogin.relogin = true;
                     reLogin.show();
                  }
               });
            }
         },
         failure: function(response){
         
         }
      });
      
   }
});



como ademas en cada modulo que cargo chequeo los permisos del usuario para habilitar o no los botones esto me permite crear permisos diferenciados para cada modulo segun las necesidades

cualquier cosa en la que te pueda ayudar no dudes en mencionarlo

espero te sirva (^_^)

Bueno gracias por la información, me parece muy buen trabajo el que has hecho, voy a estudiar bien lo que me has pasado a ver como lo puedo adaptar a lo que tengo hecho. Tengo una duda, donde consigo el plugin de IframeComponent, en internet consigo es uno que se llama SimpleIframe.

el Iframe no es un plugin es solo una extension de un boxcomponent

Código: Seleccionar todo

Ext.ux.IFrameComponent = Ext.extend(Ext.BoxComponent,{
         onRender: function (ct, position){
            this.el = ct.createChild({tag:'iframe', id: 'iframe-'+ this.id, frameBorder:0, src:this.url});
         },
         listeners : {
            beforerender : function(c){
               Ext.getCmp(c.id).getEl().mask('Cargando modulo....', 'x-mask-loading');
            },
            afterrender : function(c){
                  setTimeout("Ext.getCmp('"+c.id+"').getEl().unmask();",1000);
            }
         }
      });


Ah ok, pense que era algún plugin que estabas utilizando, lo voy a probar. Gracias de nuevo por la información. Saludos