0

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

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

ajaxリクエスト/レスポンスが発生していることを確認しました。ただし、1/2秒ごとに1回ではなく、ステップごとに1回だけ発生します。コントローラ側でステータスが変化しています。

基本的に私が必要としているのは、ステータスが変更された場合にのみプログレスバーがステップからステップに移動し、それ以外の場合はアクティブのままで現在のステップを保持することです。プログレスバーが開始されると、ステータス1/秒のajaxリクエストを送信する必要があります。

誰かが私が軌道から外れた場所を見ることができますか？

*ここにある元の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);
            }
        }
    }


    }();
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リクエストを使用した例を示しました。

于 2011-07-25T06:21:00.470 に答える