Ext 进度条

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("更新完成..单击按钮重新开始...");//更新进度条的文本信息
}
});
});
});

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值