ExtJs 的進度的實現

var pbar1; //定義一個變量用於進度條對象
var btn1; //定義一個變量用於進按鈕對象
Ext.onReady(function(){
pbar1=new Ext.ProgressBar({ //實例化進度條
renderTo:"div1", //進度條呈現的一個DIV
width:800, //進度條的寬度
text:"單擊按鈕開始..." //在進度條裏的初始文本
});
btn1=Ext.get("btn1"); //按鈕對象
btn1.on("click",f1); //按鈕事件，單擊時調用f1()函數
});
var i=0; //初始化一個變量爲0，下面會用到。
function f1(){
i++; //讓i加1
pbar1.updateProgress(i/100.0); //讓進度條更新到指定的進度。這個值是0-1之間的數，我讓i/100.0,以讓它的結果是一個小數
pbar1.updateText("進度:"+i+"%"); //進度條顯示的文本
if(i==100){ //當i==100的時候讓按鈕狀態可以使用，並讓i=1，再讓進度條停止
document.getElementById("btn1").disabled=false;
i=0;
clearInterval(x);
}
document.getElementById("btn1").disabled=true; //讓按鈕的狀態爲不可用
setTimeout("f1()",50);//用setTimeout函數遞歸調用f1()函數，以達到進度條一直跑的效果
}
//*****************進度條實例2*********************//
var pbar2;//定義一個變量用於進度條對象
var btn2;//定義一個變量用於進按鈕對象
Ext.onReady(function(){
pbar2 = new Ext.ProgressBar({ //實例化進度條
renderTo:"div2", //進度條呈現的一個DIV
width:600, //進度條的寬度
text:"單擊按鈕開始..." //在進度條裏的初始文本
});
btn2=Ext.get("btn2"); //按鈕對象
btn2.on("click",function(){//按鈕事件，單擊時執行funciton()
Runner.run(pbar2,btn2,10,function(){ //Runner是在下面定義。Runner.run方法參數(進度條對象，按鈕對象，進度大小：可以自由設定，進度條完成時執行的行數：如果不做任何事情可以填null)
Ext.Msg.alert("Information","進度條已經加載完成......"); //對話框
pbar2.reset(); //重置進度條
pbar2.updateText("單擊按鈕重新開始..."); //更新進度條的文本
});
});
});
//這個函數是我從Ext官方下載的包裏的examples裏直接拷貝來的，我也懶得去研究，貌似有點複雜
var Runner = function(){
var f = function(v, pbar, btn, count, cb){
return function(){
if(v > count){
btn.dom.disabled = false;
cb();
}else{
if(pbar.id=='pbar4'){
//give this one a different count style for fun
var i = v/count;
pbar.updateProgress(i, Math.round(100*i)+'% completed...');
}else{
pbar.updateProgress(v/count, 'Loading item ' + 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);
}
}
}
}();
//***********進度條實例3**************//
var pbar3;//定義一個變量用於進度條對象
var btn3;//定義一個變量用於進按鈕對象
Ext.onReady(function(){
pbar3 = new Ext.ProgressBar({ //實例化進度條
renderTo:"div3", //進度條呈現的一個DIV
width:300, //進度條的寬度
text:"單擊按鈕開始..." //在進度條裏的初始文本
});
btn3=Ext.get("btn3"); //按鈕對象
btn3.on("click",function(){ //按鈕單擊事件
btn3.dom.disabled=true; //把按鈕設置爲不可用狀態
pbar3.updateText("正在更新..."); //更新進度條的文本信息
pbar3.wait({ //開始執行進度條
interval:100, //每次進度的時間間隔
duration:5000, //進度條跑動的持續時間
increment:50, //進度條的增量，這個值設的越大，進度條跑的越慢，不能小於1，如果小於1，進度條會跑出範圍
fn:function(){ //進度條完成時執行的函數，也可設爲nulll
btn3.dom.disabled=false;//把按鈕設置爲可用狀態
pbar3.updateText("更新完成..單擊按鈕重新開始...");//更新進度條的文本信息
}
});
});
});