html

来源：互联网发布：2016nba总决赛数据统计编辑：程序博客网时间：2024/06/01 09:14

一、手动模式加载进度条：

<HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/><script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./../ext/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){/**updateProgress(Float value,String text)value:0——1之间的数字默认为0progressText:进度条上显示的文字text：显示的内容*/var progressBar = new Ext.ProgressBar({text: 'working...',width: 300,applyTo: 'progressBar'});var count = 0;//滚动条被刷新的次数var percentage = 0;//进度百分比var progressText = "";//进度条信息Ext.TaskMgr.start({run:function(){count++;if(count > 10){progressBar.hide();}//计算进度percentage = count/10;//生成进度条文字progressText = percentage*100+"%";//更新信息提示对话框progressBar.updateProgress(percentage,progressText);},interval:1000});});</script></HEAD><body><div id="progressBar"></div></body></HTML>

二、自定义模式加载进度条

<HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/><script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./../ext/ext-all.js"></script><style type="text/css">.custom .x-progress-inner{height: 17px;background: #fff;}.custom .x-progress-bar{height: 15px;background: transparent url(../extjs002/default_pic.gif) repeat-x 0 0;border-top: 1px solid #BEBEBE;border-bottom: 1px solid #BFBFBF;border-right: 0;}</style><script type="text/javascript">Ext.onReady(function(){var progressBar = new Ext.ProgressBar({text: 'work...',width:300,applyTo: 'progressBar',cls: 'custom'});progressBar.wait({duration: 10000,        //进度条持续更新10秒interval: 1000,   //每一秒更新一次increment: 10  //进度条分10次更新完毕});});</script></HEAD><body><div id="progressBar"></div></body></HTML>

三、自动模式加载进度条

<HTML><HEAD><TITLE>使用EXT输出HelloWorld</TITLE><!-- 导入extjs配置 … ... --><link rel="stylesheet" type="text/css" href="./../ext/resources/css/ext-all.css"/><script type="text/javascript" src="./../ext/adapter/ext/ext-base.js"></script><script type="text/javascript" src="./../ext/ext-all.js"></script><script type="text/javascript">Ext.onReady(function(){/*wait(Object config)config是一个自动更新进度条的配置项，它提供了非常有用的配置供我们使用参数如下：duration：设定进度条在被重置之前要运行的时间长度，单位是毫秒，如果忽略该项则进度条会持续更新知道调用reset方法interval：更新进度条的时间间隔，单位是毫秒默认值为1000毫秒fn：再进度条更新完毕后被调用，该回调函数没有参数当duration配置项不存在时回调函数被忽略scope：回调函数的执行范围*/var progressBar = new Ext.ProgressBar({text: 'work...',width:300,applyTo: 'progressBar'});progressBar.wait({duration: 10000,        //进度条持续更新10秒interval: 1000,   //每一秒更新一次increment: 10,  //进度条分10次更新完毕scope: this,     //回调函数执行的范围fn:function(){//更新完后调用的回调函数alert("更新完毕");}});});</script></HEAD><body><div id="progressBar"></div></body></HTML>