ExtJS从URL更新进度栏获取

Question

我正在使用ExtJS 3.4.0（v 4.0目前不是一个选项），并试图根据Ajax请求的结果更新进度条。然而，JS并不是我的特长。

我已经检查了开发论坛上的示例，并能够根据实际状态更新除了更新以外的所有工作。

我已确认我的ajax请求/响应正在发生。然而，他们每一步只发生一次，而不是每1/2秒1次。控制器端的状态正在改变。

实质上，我需要的是进度条只能在状态发生变化时才会从一步移动到另一个步骤，否则保持活动状态但保持当前步骤。一旦进度条开始，它应该每秒发送状态1的ajax请求。

任何人都可以看到我走的轨道？

*一部开拓创新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 
} 

您可以修改代码以这样的

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我做例子中，你使用jsfiddle testing ajax requests的。