Ext.ProgressBar实例

最新推荐文章于 2021-01-14 04:33:28 发布

原创最新推荐文章于 2021-01-14 04:33:28 发布 · 237 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#EXT #JavaScript #CSS #ViewUI

EXTJS 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了使用ExtJS实现进度条的四种不同方法，包括利用MessageBox显示进度、创建自定义ProgressBar组件并设置自动更新特性等。这些示例有助于开发者更好地理解和应用ExtJS中的进度条功能。

1、

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var msgBox = Ext.MessageBox.show({
  				title:'进度提示',
  				msg:'',
  				modal:true,
  				progress:true,
  				width:400
  			});
  			
  			//滚动条被刷新的次数
  			var count = 0;
  			//进度百分比
  			var percentage = 0;
  			//进度条信息
  			var processText = '';
  			
  			Ext.TaskMgr.start({
  				run:function(){
  					count++;
  					//刷新10次后关闭进度条
  					if(count>10){
  						msgBox.hide();
  					}
  					//计算进度
  					percentage = count/10;
  					//显示内容
  					processText = '当前进度：'+percentage*100+'%';
  					//更新进度条
  					msgBox.updateProgress(percentage,processText,'<font color="red">这是通过动态更新内容形成的进度条</font>');
  				},
  				interval:1000	//每秒更新
  			});
  			
  			
		});
  	</script>

2、

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var progressBar = new Ext.ProgressBar({
  				renderTo:'progressbar',
  				width:400
  			});
  			
  			//滚动条被刷新的次数
  			var count = 0;
  			//进度百分比
  			var percentage = 0;
  			//进度条信息
  			var processText = '';
  			
  			Ext.TaskMgr.start({
  				run:function(){
  					count++;
  					//刷新10次后关闭进度条
  					if(count>10){
  						progressBar.hide();
  					}
  					//计算进度
  					percentage = count/10;
  					//显示内容
  					processText = '<font color="green">'+percentage*100+'%</font>';
  					//更新进度条
  					progressBar.updateProgress(percentage,processText);
  				},
  				interval:1000	//每秒更新
  			});
  			
  			
		});
  	</script>

3、

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var progressBar = new Ext.ProgressBar({
  				renderTo:'progressbar',
  				width:400
  			});
  			
  			//初始化一个自动更新的进度条
  			progressBar.wait({
  				duration:9000,//进度条运作时间的长度，单位是毫秒
  				interval:1000,//每次更新的间隔周期（默认为1000毫秒）
  				increment:10,//进度条每次更新的幅度大小（默认为10）。如果进度条达到最后，那么它会回到原点。
  				scope:this,//回调函数的作用域
  				fn:function(){ //回调函数
  					alert("更新完成");
  					progressBar.hide();
  				}
  			});
		});
  	</script>

4、

<style type="text/css">
	
		.progressBar{
			border: 0;
		}
		.progressBar .x-progress-inner{
			height: 16px;
			background: white;
		}
		
		.progressBar .x-progress-bar{
			height: 15px;
			background: transparent url(images/custom-bar-green.gif) repeat-x 0 0;
			border-top:0;
			border-bottom:0;
			border-right: 0;
		}
	</style>

<script type="text/javascript">
  		Ext.onReady(function(){
  			Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
  			var progressBar = new Ext.ProgressBar({
  				renderTo:'progressbar',
  				width:400,
  				cls:'progressBar'
  			});
  			
  			//初始化一个自动更新的进度条
  			progressBar.wait({
  				duration:9000,//进度条运作时间的长度，单位是毫秒
  				interval:1000,//每次更新的间隔周期（默认为1000毫秒）
  				increment:10,//进度条每次更新的幅度大小（默认为10）。如果进度条达到最后，那么它会回到原点。
  				scope:this,//回调函数的作用域
  				fn:function(){ //回调函数
  					alert("更新完成");
  					progressBar.hide();
  				}
  			});
		});
  	</script>