items in sencha touch 2

Question

我有一個sencha touch應用程序，它使用tabpanel，這個應用程序的一個測試版加載tabpanel的所有項目並顯示它。 有太多的項目，切換標籤變得更慢 優化我的想法是加載項目時，只有當顯示加載掩碼後激活某個面板。

我能夠使它在第一次點擊時工作，但是當我切換到同一個選項卡時，它沒有被填充或至少項目沒有被顯示。 不會引發任何異常。

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

概述： 我的應用程序正常工作，如果所有的項目都壓在標籤 我的問題是，當我有一個項目的數量龐大，我按他們的相應選項卡上之前在開始填寫。它會持續1,2秒。 使用此應用程序的人會認爲他沒有在標籤上正確按壓，它看起來會很慢。 我的做法是在標籤上加載一個蒙版按1秒，這將使我的標籤在按下時自動響應，然後添加我的物品。這個想法只適用於第一次點擊，當我切換到另一個選項卡，並回到原來沒有顯示（除了加載掩碼） 我試過mainPanel.add而不是mainPanel.setItems。我面臨另一個問題，現在在面板上點擊下一個按鈕，我的項目顯示，但沒有加載掩碼，就好像我在按下之前在開始加載項目。

Answer 1

我想出瞭解決方案。檢查下面的代碼。

希望能幫到你！

代碼：

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

輸出示例：