Items not loaded in step 2

Question

I have a sencha touch application that uses tabpanel, the beta version of this application downloads all tab items and displays it. with so many elements, switching between tabs has become slower to optimize my idea is to load elements only when a certain panel is activated after showing the load mask.

I managed to get it to work with the first click, but when I switch to the same tab another time, when it doesn't fill, or at least the elements don't appear. 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 works correctly if all the elements are filled in at the beginning, before clicking on the tabs my problem is when I have a huge number of elements and I click on the corresponding tab. It hangs for 1.2 seconds. A person using this application will think that he did not click correctly on the tab, and he will look so slow. my approach is to load the mask on the tab for only 1 second, this will make my tab respond automatically when clicked, and then I will add my items. this idea worked only for the first click, when I switch to another tab and nothing is displayed back to the original (except the download mask) I tried mainPanel.add instead of mainPanel.setItems . I ran into another problem, now in the next touch on the panel my objects are displayed, but without a loading mask, as if I were loading items at the beginning, before clicking.

Answer 1

I understood the solution. Check out the code below.

Hope that helps you!

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

Output Example: