Ext中滚动条

最新推荐文章于 2021-02-06 18:43:39 发布

xiaobudian8611

最新推荐文章于 2021-02-06 18:43:39 发布

阅读量265

点赞数

文章标签： EXT

本文链接：https://blog.csdn.net/xiaobudian8611/article/details/83845564

版权

最近看了一下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> <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> <td></tr>
		<tr><td align='center'><div id='ProgressBar'></div><td></tr>
	</table>
 </BODY>

xiaobudian8611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ext中滚动条

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

扫一扫