Extjs長い処理中にマスクをロードする

Question

パネルにロードマスクを正しく設定する際に問題があります。ボタンをクリックすると、新しいツリーストアが生成され（ローカル）、かなりの時間がかかります。ロード・マスクは、関数全体が評価された後にのみ（ミリ秒）表示されます。私のコードでは、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(); 
    } 

スプリット小包機能： - JSは*シングルスレッドである -

 

    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

その理由は非常に簡単です。 DOMを変更した場合（マスクをオンにするなど）、実際の変更は現在の実行パスが終了した直後に行われます。時間のかかる作業を始める前にマスクをオンにするため、ブラウザはDOMが変更されるまで待機します。メソッドの最後にマスクをオフにするので、まったく表示されないことがあります。解決策は簡単です - 少し遅れてストアの再構築を呼び出す。

ワーキングサンプル：http://jsfiddle.net/25z3B/2/

あなたが持っているしたい場合は、真のマルチスレッドはweb workers

Answer 2

の手順に従い参照*：bodyタグの下に本部類似作成

1. を

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

2. Include 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. bodyタグの呼び出し関数onloadとjavascr IPT：loadMask（「myLoading」、偽、「読み込み中...」）

（4）ステップは、その後、動作していない場合は、新しい関数unloadMaskを作成し、コードの下に、この機能の書き込み中とのonloadで、この関数を呼び出しますボディータグの