Javascript sencha touch 2中未加载的项目

我有一个使用tabpanel的sencha touch应用程序，该应用程序的测试版加载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秒。 使用此应用程序的人会认为他没有正确按下选项卡，并且它看起来很慢。 我的方法是在tab press上加载一个掩码，只需1秒，这将使我的tab在按下时自动响应，然后我添加我的项目。这个想法只适用于第一次单击，当我切换到另一个选项卡并返回到原始选项卡时，没有显示任何内容（除了加载掩码）

---

我尝试了

mainPanel.add

而不是

mainPanel.setItems

。我遇到了另一个问题，现在在面板上的下一次点击中，我的项目显示出来，但没有加载掩码，就好像我在按下之前加载项目一样。

我找到了解决方案。检查下面的代码

希望对你有帮助

代码：

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

样本输出：

---

控制台上出现了什么错误？你试过谷歌Chrome的Inspect元素吗？@roadRunner谢谢。没有显示错误，我只是第二次按下选项卡时无法设置项目（没有引发异常）。我检查了chrome的inspect元素中的项目数组，它是空的。contents值设置在哪里？我看不到在应用程序中设置了它的值。非常感谢，您的回答很有帮助，尽管它在我的项目集上无法正常工作。当我使用Ext.getCmp（'mpanel'）.add（myItems）时；只有一项myItems被加载，在我的例子中是工具栏。谢谢。好的，顺便问一下，你想添加哪些项目？如果可能的话，我可以帮助您在选项卡上获取这些项目。感谢roadrunner，我创建了一个Sencha Fiddle版本，这样人们可以看到它的工作方式并使用它（我将延迟改为3000，而不是300，这样您可以在3秒钟内看到加载动画）：-）