सेन्चा टच 2 में लोड नहीं हो रहे आइटम

Question

मेरे पास एक सेन्चा टच एप्लिकेशन है जो एक टैबपनेल का उपयोग करता है, इस एप्लिकेशन का बीटा संस्करण टैबपेनल के सभी आइटम लोड करता है और इसे प्रदर्शित करता है। इतने सारे आइटमों के साथ, टैब के बीच स्विचिंग धीमा हो गया अनुकूलन के लिए मेरा विचार केवल तभी लोड करना है जब लोडिंग मास्क दिखाने के बाद कोई निश्चित पैनल सक्रिय हो।

मैं इसे पहले क्लिक पर काम करने में सक्षम था लेकिन जब मैं एक ही टैब पर स्विच करता हूं तो यह भरा नहीं जाता है या कम से कम आइटम नहीं दिखाए जा रहे हैं। कोई अपवाद नहीं फेंक दिया गया है।

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 की कोशिश की। मुझे एक और समस्या का सामना करना पड़ा, अब पैनल पर अगले टैप में, मेरे आइटम दिखाए जाते हैं लेकिन लोडिंग मास्क के बिना जैसे कि मैं दबाने से पहले शुरुआत में आइटम लोड कर रहा हूं।

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

नमूना उत्पादन: