0

我正在使用 ExtJS 3.4.0（此时 v 4.0 不是一个选项）并尝试根据 Ajax 请求的结果更新进度条。然而 JS 不是我的强项。

我已经检查了开发论坛上的示例，除了根据实际状态进行更新之外，一切都可以正常工作。

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

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

谁能看到我偏离轨道的地方？

*位于此处的原始分机示例分机示例

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);
            }
        }
    }


    }();
4

1 回答 1

2

我认为你的方法太复杂了。相反，我建议您的服务器不仅返回状态，还返回当前步骤和每个请求的步骤总数。

因此，假设您的服务器返回如下响应：

{
  "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);
        }
    });
}

在这里，我使用jsfiddle 测试 ajax requests为您做了示例。

于 2011-07-25T06:21:00.470 回答