Ext中滚动条

shengmo8611

浏览: 34139 次
性别:
来自: 青岛

最近访客更多访客>>

ding_zk

feilinglaji

zxc583700871

yk0025

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (13)

社区版块

存档分类

EXT

最近看了一下Ext中的滚动条忽然发现其实是很简单就是使用ProgressBar对象
滚动条包括两种方式:1.手工模式2.自动模式(废话)
1.手动模式:我们只要使用ProgressBar.updateProgress([float value,String text]);方法就可以了
参数中 value 0-1之间默认0 如果value大于1更新也不会停止
滚动条上现实的文字..如果忽视此参数..滚动条上的文字保持不变

<script type="text/javascript">
	Ext.onReady(function(){
		var ProgressBar = new Ext.ProgressBar({
			width:300,//设定进度条的宽度
			applyTo:'ProgressBar'
		});
		var count = 0;//滚动条被刷新的次数
		var percentage = 0;//进度百分比
		var progressText = '';//进度条信息

		Ext.TaskMgr.start({
			run:function(){
				count++;
				//刷新10次后关闭信息提示对话框
				if(count > 10){
					count=1;
				}
				//计算进度
				percentage = count/10;
				progressText = percentage * 100 + '%'
				//更新信息提示对话框
				ProgressBar.updateProgress(percentage,progressText);
			},
			interval:1000
		});
	});
  </script>
 </HEAD>
 <BODY>
	<table width=100%>
		<tr><td>&nbsp;<td></tr>
		<tr><td align='center'><div id='ProgressBar'></div><td></tr>
	</table>
 </BODY>

2.自动模式:我们只需要使用wait([Object config])方法就可以实现了
config参数是一个滚动条配置参数
duration:滚动条在重置前运行的时间
interval:更新滚动条的时间间隔
increment:进度条分段数
fn:更新完成或执行的方法
scope回调函数执行范围

<script type="text/javascript">
	Ext.onReady(function(){
		var ProgressBar = new Ext.ProgressBar({
			text:'working.....',//进度条上显示的文字
			width:300,//设定进度条的宽度
			applyTo:'ProgressBar'
		});
		ProgressBar.wait({
			duration:10000,//进度条持续更新10秒钟
			interval:1000,//每1秒钟更新一次
			increment:10,//进度条分10次更新完毕
			scope:this,//回调函数的执行范围
			fn:function(){//更新完成后调用的回调函数
				alert('更新完毕');
			}
		});
	});
  </script>
 </HEAD>
 <BODY>
	<table width=100%>
		<tr><td>&nbsp;<td></tr>
		<tr><td align='center'><div id='ProgressBar'></div><td></tr>
	</table>
 </BODY>

分享到：