未在sencha touch中加載的商品2

Question

我有一個使用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 。 我面臨另一個問題，現在在面板上的下一個點擊，我的項目顯示但沒有加載面具，好像我在按下之前在開始時加載項目。

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

樣本輸出：