9

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

            Ext.each（plan.parcels、function（parcel）{
                var parcel_obj = {
                        id：parcel.parcel.id、
                        text：parcel.parcel.name、
                        葉：真、
                        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（）;
}
4

2 に答える 2

14

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

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

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

于 2012-09-26T12:22:58.720 に答える
1

次の手順を実行します：

  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");
}
于 2013-01-24T05:48:08.847 に答える