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

输出示例：