web-dev-qa-db-ja.com

長い処理中のExtjsロードマスク

パネルにロードマスクを正しく設定するのに問題があります。ボタンをクリックした後、新しいツリーストアが(ローカルで)生成されており、かなりの時間がかかります。ロードマスクは、関数全体が評価された後(私は思う)にのみミリ秒の間表示されます。私のコードでは、関数全体が処理された後、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: "お待ちください..."}); 
 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 '、
 extended:true、
 leaf:false 
}; 
 
 Ext.each(plan.parcels、function(parcel){
 var parcel_obj = {
 id:parcel.parcel.id、
 text:parcel.parce l.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(); 
} 
9
patryks

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

作業サンプル: http://jsfiddle.net/25z3B/2/

*真のマルチスレッドが必要な場合は、 Web Workers を参照してください。

14
Krzysztof

次の手順を実行します:

  1. Bodyタグの下にDivLikeを作成します

    <div id="myLoading" class="myloadingjs" style="float: center; overflow: auto; margin-top:290px"><div>
    
  2. スクリプトとして頭にExtJsライブラリを含める

  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タグでfunctiononloadを呼び出し、javascript:loadMask( 'myLoading'、false、 'Loading ...')を呼び出します。

(4)ステップが機能しない場合は、新しい関数unloadMaskを作成し、この関数内に以下のコードを記述して、bodyタグのonloadでこの関数を呼び出します。

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