URLからプログレスバーを更新するExtJS

Question

私はExtJS 3.4.0を使用しています（この時点でv 4.0はオプションではありません）、Ajaxリクエストの結果に基づいてプログレスバーを更新しようとしています。しかし、JSは私の特権ではありません。

私はdevフォーラムでサンプルを調べて、実際のステータスに基づいて更新以外のすべてを稼働させることができました。

私のajaxリクエスト/応答が行われていることを確認しました。しかし、1/1秒に1回ではなく、1回に1回発生します。コントローラ側でステータスが変化しています。

私が必要とするのは、進捗バーがステータスが変更された場合にのみステップバイステップに移動し、そうでない場合は現在のステップを保持しながらアクティブに留まることです。プログレスバーが開始されると、毎秒ステータス1のajaxリクエストが送信されます。

私はどこから外れてしまったのでしょうか？

*のorignalのExt例ここにありExt example

JSコードは、私はあなたの方法があまりにも洗練されたと思い

var mystatus=""; 

Ext.onReady(function(){ 
    var pbar1 = new Ext.ProgressBar({ 
     text:'Initializing...' 
    }); 
    var count = 0; 
    mystatus=null; 
    var btn1 = Ext.get('btn1'); 
       btn1.dom.disabled = false; 
    //setup request 
    Ext.Ajax.request({ 
     url: './account/getStatus', 
     method:'GET', 
     success: function (result, request) { 

       mystatus =Ext.decode(result.responseText).status; 
       count =Ext.decode(result.responseText).steps; 
     }, 
     failure: function (result, request) { 
       Ext.MessageBox.alert('Failed', result.responseText); 
     } 
    }); 


    btn1.on('click', function(){ 
    Ext.fly('p1text').update('Working');   
     if (!pbar1.rendered){ 
      pbar1.render('p1'); 
     }else{ 
      pbar1.text = 'Initializing...'; 
      pbar1.show(); 
     } 


     Runner.run(pbar1, Ext.get('btn1'), count, function(){ 
      pbar1.reset(true); 
      Ext.fly('p1text').update('Done.').show(); 
     }); 


    }); 



}); 

var Runner = function(){ 
    var f = function(v, pbar, btn, count,cb){ 
     return function(){ 
      if(v > count){ 
       btn.dom.disabled = false; 
       cb(); 
      }else{ 

      /// i think this is the block that is either wrong or in the wrong place 
      curStatus=mystatus.toString(); 
       Ext.Ajax.request({ 
        url: './account/getStatus', 
        method:'GET', 
        success: function (result, request) { 
          mystatus =Ext.decode(result.responseText).status; 
        }, 
        failure: function (result, request) { 
          Ext.MessageBox.alert('Failed', result.responseText); 
        } 
       }); 

        if (curStatus!=mystatus){ 
         pbar.updateProgress(v/count,'Working on '+mystatus+ ' Step ' + v + ' of '+count+'...'); 
        } 
       } 
      } 
     }; 
     return { 
     run : function(pbar, btn, count, cb){ 
      btn.dom.disabled = true; 
      var ms = 5000/count; 
      for(var i = 1; i < (count+2); i++){ 
       setTimeout(f(i, pbar, btn, count, cb), i*ms); 
      } 
     } 
    } 


    }(); 

Answer 1

に従います。代わりに、あなたのサーバーはステータスだけでなく、現在のステップと各リクエストのステップの合計数を返すことをお勧めします。

だから、あなたのサーバーをasummingすると、このような応答を返します。

{ 
    "status": "My status for step №2", 
    "steps": "6", // total ammount of step 
    "step": "2" //current step 
} 

あなたは私はあなたがjsfiddle testing ajax requestsを使用するための例を作りました。この

btn1.on('click', function() { 
    //some code here 

    run(pbar1, Ext.get('btn1'), function() { 
    pbar1.reset(true); 
    Ext.fly('p1text').update('Done.').show(); 
    }); 
} 
... 
... 
... 
var run = function(pbar, btn, cb) { 
    Ext.Ajax.request({ 
     url: './account/getStatus', 
     method: 'GET', 
     success: function(result, request) { 
      //alert(result.responseText); 
      var json = Ext.decode(result.responseText); 
      pbar.updateProgress(json.step/json.steps, 'Working on ' + json.status + ' Step ' + json.step + ' of ' + json.steps + '...'); 
      if (json.step < json.steps) setTimeout(function() { 
       run(pbar, btn, cb, step + 1); 
      }, 200); 
      else { 
       btn.dom.disabled = false; 
       cb(); 
      } 
     }, 
     failure: function(result, request) { 
      Ext.MessageBox.alert('Failed', result.responseText); 
     } 
    }); 
} 

Hereような何かにあなたのコードを変更することができます。