ExtJS обновляет индикатор выполнения с URL get - PullRequest
Новая
       5

ExtJS обновляет индикатор выполнения с URL get

0 голосов
/ 25 июля 2011

Я использую ExtJS 3.4.0 (v 4.0 на данный момент не поддерживается) и пытаюсь обновить индикатор выполнения на основе результатов запроса Ajax.Однако JS не моя сильная сторона.

Я изучил примеры на форумах разработчиков и смог заставить все работать, кроме обновления, основанного на фактическом статусе.

Я подтвердил, что мой ajaxзапрос / ответы происходят.Однако они происходят только один раз за шаг, а не 1 за 1/2 секунды.Статус изменяется на стороне контроллера.

По сути, мне нужно, чтобы индикатор выполнения перемещался только от шага к шагу ТОЛЬКО после изменения состояния и в противном случае оставался активным, но удерживая текущий шаг.Как только индикатор выполнения запустится, он должен отправлять ajax-запрос о состоянии 1 в секунду.

Кто-нибудь может увидеть, где я сошел с пути?

* orignal Ext Пример, расположенный здесь Extпример

Код 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);
            }
        }
    }


    }();

1 Ответ

2 голосов
/ 25 июля 2011

Я думаю, что ваш метод слишком сложен. Вместо этого я предлагаю, чтобы ваш сервер возвращал не только статус, но и текущий шаг и общее количество шагов для каждого запроса.

Итак, ваш сервер возвращает ответы вроде этого: 

{
  "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 .

...