लंबे प्रसंस्करण के दौरान एक्स्ट लोड लोड मास्क

Question

मुझे पैनल पर लोड मास्क सेट करने में समस्याएं हैं। बटन पर क्लिक करने के बाद नया पेड़ स्टोर जेनरेट किया जा रहा है (localy) और इसमें काफी समय लगता है। लोड मास्क केवल एक मिलीसेकंड के लिए दिखाता है (मुझे लगता है) पूरे समारोह का मूल्यांकन करता है। मेरे कोड console.log(0) और console.log(1) पूरे फ़ंक्शन प्रक्रियाओं के बाद दिखाता है, बटन केवल कुछ सेकंड के लिए फ्रीज करता है और फिर उस कंसोल के बाद 0 and 1 दिखाता है। इस तरह की स्थितियों को संभालने का सही तरीका क्या है।

बटन परिभाषा:

    xtype:'button', 
    text:'Rozdziel działki', 
    iconCls:'icon-map_link', 
    scope:this, 
    handler:function(){ 
     console.log(0); 
     this.splitParcels(); 
    } 

स्प्लिट पार्सल समारोह: यहाँ कोड है -

 

    splitParcels:function(){ 
    var mask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."}); 
     mask.show(); 
     console.log(1); 

     this.mgstore.getRootNode().removeAll(); 

     console.log(this.response); 
     var root_node = this.mgstore.getRootNode(); 
     Ext.each(this.response.plans, function(plan){ 
      var plan_obj = { 
        id:plan.plan.id, 
        text:plan.plan.abbreviation, 
        gsip_plan:plan, 
        gsip_type:'plan', 
        iconCls:'icon-map', 
        expanded:true, 
        leaf:false 
      }; 

      Ext.each(plan.parcels, function(parcel){ 
       var parcel_obj = { 
         id:parcel.parcel.id, 
         text:parcel.parcel.name, 
         leaf:true, 
         gsip_plan:plan, 
         gsip_parcels:parcel, 
         gsip_type:'parcel', 
         iconCls:'icon-vector' 
       }; 

       var planNode = root_node.appendChild(plan_obj); 
       planNode.appendChild(parcel_obj); 
      }); 
     }); 

     if (mask != undefined) mask.hide(); 
} 

Answer 1

कि के लिए कारण काफी सरल है - जे एस पिरोया एकल है *। यदि आप डीओएम संशोधित करते हैं (उदाहरण के लिए मास्क चालू करके) वास्तविक निष्पादन पथ समाप्त होने के तुरंत बाद वास्तविक परिवर्तन किया जाता है। चूंकि आप कुछ समय लेने वाले कार्य की शुरुआत में मास्क चालू करते हैं, इसलिए ब्राउज़र खत्म होने तक डोम परिवर्तनों के साथ प्रतीक्षा करता है। क्योंकि आप विधि के अंत में मुखौटा बंद कर देते हैं, यह शायद बिल्कुल नहीं दिखाया जा सकता है। समाधान सरल है - कुछ देरी के बाद स्टोर पुनर्निर्माण का आह्वान करें।

कार्य नमूना: http://jsfiddle.net/25z3B/2/

* यदि आप करना चाहते हैं सच बहु सूत्रण देख web workers

Answer 2

इन चरणों का पालन करें:

1. बॉडी टैग के नीचे एक डिव की तरह बनाएं

   <div id="myLoading" class="myloadingjs" style="float: center; overflow: auto; margin-top:290px"><div> 
   

2. Ext Js lib शामिल करें स्क्रिप्ट के रूप में सिर पर rary

3. एक स्क्रिप्ट टैग बना सकते हैं और ग्रिड की दुकान पर स्क्रिप्ट टैग

   var Mask; 
   function loadMask(el,flag,msg){ 
   Mask= new Ext.LoadMask(Ext.get(el), {msg:msg}); 
   if(flag) 
       Mask.show(); 
   else 
       Mask.hide(); 
   

   }

4. उपयोग कॉलबैक फ़ंक्शन beforeload भीतर लाइनों के नीचे लिख लें और

   नीचे के रूप में अपने कार्य loadMask फोन

   javascript:loadMask('myLoading',true,'Loading ...') 
   

5. बॉडी टैग पर कॉल फ़ंक्शन ऑनलोड और कॉल जैवस्कर IPT: loadMask ('myLoading', झूठे, 'लोड हो रहा है ...')

अगर (4) कदम तो काम नहीं कर रहा एक नया कार्य unloadMask बना सकते हैं और नीचे दिए गए कोड इस समारोह लिखने के भीतर और ऑनलोड पर इस फ़ंक्शन को कॉल करें बॉडी टैग

function unloadMask(){ 
    Ext.util.CSS.createStyleSheet(".myloadingjs {\n visibility:hidden; \n } ", "GoodParts"); 
}