elementi che non si caricano in sencha touch 2

Question

Ho un'applicazione sencha touch che utilizza un tabpanel, una versione beta di questa applicazione carica tutti gli elementi del tabpanel e la visualizza. con così tanti elementi, il passaggio da una scheda all'altra è diventato più lento per l'ottimizzazione la mia idea è di caricare elementi solo quando un determinato pannello viene attivato dopo aver mostrato una maschera di caricamento.

ero in grado di farlo funzionare al primo clic, ma quando passo alla stessa scheda un'altra volta non viene riempito o almeno gli elementi non vengono visualizzati. non vengono lanciate eccezioni.

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 ] 
    }); 
    } 
    }); 

panoramica: mia applicazione funziona correttamente se tutti gli elementi sono riempiti all'inizio Prima di premere su schede mio problema è quando ho un gran numero di oggetti e premo sulla loro scheda corrispondente. si blocca per 1,2 secondi. una persona che utilizza questa applicazione penserà che non ha premuto correttamente sulla scheda e sembrerà così lento. il mio approccio è quello di caricare una maschera sul tab premere solo per 1 sec, questo renderà la mia scheda rispondere automaticamente quando viene premuto, quindi aggiungo i miei elementi. questa idea ha funzionato solo per il primo clic, quando passo a un'altra scheda e ritorno all'originale non viene mostrato nulla (tranne che per la maschera di caricamento) ho provato mainPanel.add anziché mainPanel.setItems. Ho affrontato un altro problema, ora nel prossimo tocco sul pannello, i miei articoli sono mostrati ma senza la maschera di caricamento come se stessi caricando gli articoli all'inizio prima di premere.

Answer 1

Ho trovato la soluzione. Controlla il codice qui sotto.

La speranza che ti aiuta!

Codice: uscita

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 ] 
     }); 
    } 
}); 

Esempio: