sencha touch 2 中未加载的项目

Posted 2023-02-25

【中文标题】sencha touch 2 中未加载的项目

【英文标题】：items not loading in sencha touch 2

【发布时间】：2012-04-25 07:18:28

【问题描述】：

我有一个使用 tabpanel 的 sencha touch 应用程序，此应用程序的 beta 版本会加载 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。我遇到了另一个问题，现在在面板上的下一次点击中，我的项目被显示但没有加载蒙版，就好像我在按下之前在开始加载项目一样。

【问题讨论】：

您在控制台上遇到什么错误？你试过谷歌浏览器的检查元素吗？

@roadRunner 谢谢。没有显示错误，我只是无法在第二次按下选项卡时设置项目（没有抛出异常）我检查了我在 chrome 的检查元素中的项目数组，它是空的。

内容值设置在哪里？我看不到在应用程序中设置它的值。

【参考方案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 ]
        ); 
    
);

样本输出：

【讨论】：

感谢，您的回答很有帮助，尽管它在我的一组项目上无法正常工作。当我使用 Ext.getCmp('mpanel').add(myItems);只有一项 myItems 被加载，在我的情况下是工具栏。谢谢。

好的，顺便说一句，您要添加哪些项目？如果可能，我可以帮助您将这些项目放在标签上。

感谢 roadrunner，我创建了一个 Sencha Fiddle 版本，这样人们就可以看到它是如何工作的并使用它（我将延迟更改为 3000 而不是 300，以便您可以看到 3 秒的加载动画）： senchafiddle.com/#84KWT :-)