elementos que no se cargan en sencha touch 2

Question

tengo una aplicación sencha touch que usa un tabpanel, una versión beta de esta aplicación carga todos los elementos del tabpanel y lo muestra. con tantos elementos, la conmutación entre pestañas se hizo más lenta para optimizar mi idea es cargar elementos solo cuando se activa un panel determinado después de mostrar una máscara de carga.

pude hacerlo funcionar con el primer clic, pero cuando cambio a la misma pestaña en otro momento no se está llenando o al menos no se muestran los elementos. no se lanzan excepciones.

Ext.application({ 
    name : 'Sencha', 
    launch : function() { 
      var root = contents; 
      var children = root._listOfContentChild; 
      var mainPanel = Ext.create('components.NavigationPanel', 
       { 
       iconCls : 'more', 
       listeners: { 

        activate: function() { 
          mainPanel .setMasked({ 
           xtype: 'loadmask', 
           message: 'Loading...' 
          }); 

          setTimeout(function() {   
           loadItems(root,children); // returns my items 
           mainPanel .setItems(items); 
           mainPanel .setMasked(false); 
          }, 300); 

    } } }); 

    var settingsPanel = Ext.create('components.NavigationPanel', { 
     title : 'Settings', 
     iconCls : 'settings', 
    }); 


    view=Ext.Viewport.add({ 
     xtype : 'tabpanel', 
     deferredRender:true, 

     tabBarPosition : 'bottom', 
     activeItem:settingsPanel, 
     items : [mainPanel,settingsPanel ] 
    }); 
    } 
    }); 

visión general: mi aplicación funciona correctamente si todos los elementos están llenos al comienzo Antes de pulsar en las pestañas mi problema es cuando tengo un gran número de artículos y presiono en su ficha correspondiente. se cuelga durante 1,2 segundos una persona que use esta aplicación pensará que no presionó correctamente en la pestaña y se verá tan lento. mi enfoque es cargar una máscara en la pestaña presionar solo durante 1 segundo, esto hará que mi pestaña responda automáticamente cuando se presiona, luego agrego mis artículos. esta idea solo funcionó para el primer clic, cuando cambio a otra pestaña y regreso al original no se muestra nada (excepto la máscara de carga) intenté mainPanel.add en lugar de mainPanel.setItems. Me enfrenté a otro problema, ahora en el siguiente toque en el panel, mis artículos se muestran pero sin la máscara de carga como si estuviera cargando los artículos al principio antes de presionar.

Answer 1

Descubrí la solución. Verifique el código a continuación.

Espero que te ayude!

Código: salida

Ext.Loader.setConfig({ 
    enabled: true 
}); 

Ext.application({ 
    name: 'Sencha', 

    launch: function() { 
     //var root = contents; 
     //var children = root._listOfContentChild; 
     var mainPanel = Ext.create('Ext.Panel', { 
          iconCls : 'more', 
          id:'mpanel', 
          styleHtmlContent:true, 
          listeners: { 
           painted: function() { 
           mainPanel.removeAll(); 
           mainPanel.add({ 
             masked:{ 
             xtype:'loadmask', 
             id:'lmask', 
             } 
           }); 
           setTimeout(function() {  
             Ext.getCmp('lmask').hide(); 
             Ext.getCmp('mpanel').add({ xtype:'textfield',label:'Name',required:true }); 
            }, 300); 

           } 
          } 
          }); 

     var settingsPanel = Ext.create('Ext.Panel', { 
      title : 'Settings', 
      iconCls : 'settings', 
     }); 


     view=Ext.Viewport.add({ 
      xtype : 'tabpanel', 
      deferredRender:true, 

      tabBarPosition : 'bottom', 
      activeItem:settingsPanel, 
      items : [mainPanel,settingsPanel ] 
     }); 
    } 
}); 

muestra: