Question

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

我已经在开发论坛上检查了样本，并且除了根据实际状态进行更新外，还能够正常运行。

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

基本上我需要的是进度条仅在状态发生变化时才从一个步骤移动到另一个步骤，否则保持活动但保持当前步骤。进度条启动后，它应该每秒发送状态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
}

您可以将代码修改为此类

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为您做了示例。

ExtJS从URL get更新进度条

1 个答案: