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（）; 
}
extjsextjs4
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