Extjs 进度条
来源:互联网 发布:python里的while break 编辑:程序博客网 时间:2024/05/16 10:31
<script type="text/javascript"> //<![cdata[ Sys.WebForms.PageRequestManager._initialize('AjaxHolder$scriptmanager1', document.getElementById('Form1')); Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tAjaxHolder$UpdatePanel1'], [], [], 90); //]]> </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", //进度条呈现的一个DIVwidth:800, //进度条的宽度text:"单击按钮开始..." //在进度条里的初始文本});btn1=Ext.get("btn1"); //按钮对象btn1.on("click",f1); //按钮事件,单击时调用f1()函数});var i=0; //初始化一个变量为0,下面会用到。function f1(){i++; //让i加1pbar1.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", //进度条呈现的一个DIVwidth: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 funvar 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", //进度条呈现的一个DIVwidth: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(){ //进度条完成时执行的函数,也可设为nulllbtn3.dom.disabled=false;//把按钮设置为可用状态pbar3.updateText("更新完成..单击按钮重新开始...");//更新进度条的文本信息}});});});
- Extjs 进度条
- Extjs 进度条
- Extjs进度条
- ExtJs 进度条
- Extjs进度条
- Ajax and Extjs 进度条
- Extjs 进度条实例
- ExtJS 进度条的使用
- ExtJS Grid进度条
- Extjs学习进度条
- Extjs实现进度条
- extjs制作进度条
- extjs进度条设置
- ExtJS 进度条样式设置
- Extjs进度条超时解决
- extjs进度条代码实例
- Extjs之进度条的控制”
- (4)ExtJS之进度条ProgressBar
- Linux下基于POSIX标准的共享内存操作示例
- VS2010中的自动化测试(2)——单元测试
- 检查指定端口被哪个进程占用,并结束它
- 从问题看本质:socket到底是什么?
- 基于boost正则表达式:对目录下所有文本文件的中文词频统计
- Extjs 进度条
- 获取系统软件信息
- 杭电acm1005 Number Sequence
- hibernate get load find
- 合并排序
- JDBC基础教程之CallableStatement(怎样操作用java程序操作oracle的过程)
- 大型SNS系统可能用到的集群构
- Linux中man的使用
- 杭电acm1012 u Calculate e