在sencha touch中不加载物品2 [英] items not loading in sencha touch 2

问题描述

我有一个使用tabpanel的sencha touch应用程序，此应用程序的beta版本加载tabpanel的所有项目并显示它。
与这么多项目，切换之间的选项卡变得更慢
优化我的想法是加载项目，只有当某个面板在显示加载掩码后被激活。

i have a sencha touch application that uses a tabpanel, a beta version of this application loads all items of the tabpanel and displays it. with so many items, switching between tabs became slower for optimization my idea is to load items only when a certain panel is activated after showing a loading mask.

我能够使其在第一次点击工作，但是当我切换到同一个选项卡另一次它没有被填充或至少项目没有显示。
没有异常被抛出。

i was able to make it work on first click but when i switch to the same tab another time it's not being filled or at least items are not being showed. no exceptions are thrown.

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秒钟，这将使我的标签在按下时自动响应，然后我添加我的项目。这个想法只适用于第一次点击，当我切换到另一个选项卡并返回到原来没有显示（除了加载蒙版）
i尝试 mainPanel.add 而不是 mainPanel.setItems 。我面临另一个问题，现在在下一步点击面板上，我的项目被显示，但没有加载掩码，就像我在开始之前加载项目一样。

overview: my application is working correctly if all items are filled at the beginning before pressing on tabs my problem is when i have a huge number of items and i press on their corresponding tab. it hangs for 1,2 secs. a person using this application will think that he didn't press correctly on the tab and it will look so slow. my approach is to load a mask on tab press just for 1 sec, this will make my tab respond automatically when pressed, then i add my items. this idea worked only for the first click, when i switch to another tab and back to the original nothing is being showed (except for the loading mask) i tried mainPanel.add instead of mainPanel.setItems. i faced another problem, now in the next tap on the panel,my items are shown but without the loading mask as if i'm loading the items at the beginning before pressing.

推荐答案

我想出了解决方案。检查以下代码。

I figured out the solution. Check the below code.

希望能帮助您！

代码：

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

示例输出：

这篇关于在sencha touch中不加载物品2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！