items not loading in sencha touch 2

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.

What error are you getting on console ? Did you try Google Chrome's Inspect element ? — Saurabh Gokhale, Apr 25 '12 at 11:16
@roadRunner thank you. no errors are shown, i'm just unable to set the items the second time i press on the tab(no exception are thrown) i checked my array of items in the chrome's inspect element it's empty. — john, Apr 26 '12 at 08:25
Where is contents value set ? I can't see its value being set inside the application. — Saurabh Gokhale, Apr 27 '12 at 11:13

score 3 · Accepted Answer · answered Apr 27 '12 at 11:35

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 :

Loading Mask

enter image description here

Appreciated, your answer was helpful although it didn't work correctly on my set of items. when i use Ext.getCmp('mpanel').add(myItems); only one item of myItems gets loaded which is in my case the toolbar. thank you. — john, Apr 29 '12 at 19:35
ok, btw, which all items were you trying to add? If possible, I can help you to get those items on the tab. — Saurabh Gokhale, Apr 29 '12 at 20:17
Thanks roadrunner, I created a Sencha Fiddle version so people can see how it works and play with it (I changed the delay to 3000 instead of 300 so you can see the loading animation for 3 seconds): http://www.senchafiddle.com/#84KWT :-) — Digeridoopoo, May 22 '12 at 09:30

items not loading in sencha touch 2

1 Answers1

Linked