Question

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

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.

Answer 1

I figured out the solution. Check the below code.

Hope that helps you!

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

Sample output :