ExtJs 的进度的实现

ExtJs实现进度条实例,很酷，很简单..

<script type="text/javascript"> //<![cdata[ Sys.WebForms.PageRequestManager._initialize('AjaxHolder$scriptmanager1', document.getElementById('Form1')); Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tAjaxHolder$UpdatePanel1'], [], [], 90); //]]&gt; </script>

<style type="text/css"> <!-- .style4 {color: #660033} .style5 {color: #660000} --> </style>

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


}


});


});


});

小菜毛毛 2009-05-05 14:58 发表评论