`

进度条的自动、手动和自定义模式加载方式和区别

EXTCSSJavaScriptHTML 
阅读更多

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

<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之间的数字默认为0
				progressText:进度条上显示的文字
				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>
分享到：
| updateProgress更新进度条及提示信息
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics