[ExtJs5.1.0系列-第3天] 进度条组件

进度条组件介绍

1. 认识Ext.ProgressBar

Ext.ProgressBar是一个可更新的进度条组件，继承自Ext.Component，该进度条具有2种不同的模式: 手工模式和自动模式。在手工模式中程序员要自己控制进度条的显示、更新、清除；在自动模式中只需调用wait方法，进度条就会自动无限制地滚动下去，它适合为那些长时间的同步操作进行提示。

下表给出所有组件都有的公共属性和方法

配置项	类型	说明
renderTo	String	指定一个页面上已经存在的元素或元素id，该元素将会成为新组件的容器
height	Number	组件的高度单位是像素
width	Number	组件的宽度单位是像素
cls	String	一个可选的样式表扩展，用于组件元素，常用于用户自定义样式，默认为空

注意: renderTo将目标元素作为新组件的容器，所以它要求目标元素必须可以直接作为容器使用，在HTML元素中并不是所有元素都可以直接作为其他元素的容器。

2. 手工模式的进度条

手工更新进度条主要是通过调用进度条的updateProgress()方法实现的，它与之前介绍过的updateProgress()方法非常类似，下面介绍如何使用updateProgress()方法

调用格式:

updateProgress([Float value], [String text], [Boolean animate])

参数说明:

value: 0~1的数字，默认为0，如果value超过1，进度条不会重新开始

text: 进度条上显示的文字，如果忽略该参数则进度条将保持现有的文字不更新

animate: 是否使用动画效果，默认为false

返回值: Ext.ProgressBar

示例代码:

首先在index.jsp中定义一个div，作为Ext.ProgressBar的容器

<%@ page language="java" import="java.util.*" contentType="text/html;charset=UTF-8" pageEncoding="utf-8"%>
<!DOCTYPE HTML>
<html>
  <head>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/ext-all.js"></script>
  	<script type="text/javascript" src="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/ext-theme-crisp.js"></script>
  	<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/extjs5.1.0/package/ext-theme-crisp/build/resources/ext-theme-crisp-all.css" />  
  	
	<script type="text/javascript" src="${pageContext.request.contextPath}/scripts/script.js"></script>
  </head>
  
  <body>	
  	<div id="ProgressBar"></div>
  </body>
</html>

然后再script.js中

Ext.onReady(function() {
	var progressBar = new Ext.ProgressBar({
		width: 300, //设置进度条宽度
		renderTo: ProgressBar
	});
	
	var count = 0; //进度条被刷新次数
	var percentage = 0; //进度百分比
	var progressText = ''; //进度条信息
	
	Ext.TaskManager.start({
		run: function() {
			count ++;
			if (count > 10) {
				progressBar.hide();
			}
			// 计算进度
			percentage = count / 10;
			progressText = '已完成: ' + percentage * 100 + '%';
			progressBar.updateProgress(percentage, progressText, true);
		},
		interval: 500,
		repeat: 11
	});
});

3. 自动模式的进度条

自动模式的进度条不能准确的反应程序的执行状态，而是给用户提供一个友好的提示，表示正在执行一个耗时的操作，减轻用户的等待感。创建一个自动模式的进度条并不复杂，只要调用进度条的wait()方法，进行必要的配置就可以了。

调用格式:

wait([Object config])

参数说明:

config是一个自动更新进度条的配置对象，它提供了非常有用的配置项供我们使用，如下表:

配置项	类型	说明
duration	Number	设定进度条在被重置之前要运行的时间长度，单位是毫秒，如果忽略该项则进度条会持续更新直到调用reset方法
interval	Number	更新进度条的时间间隔，单位是毫秒，默认值为1000毫秒
animate	Boolean	是否启用动画效果
increment	Number	进度条的分段数量，也就是进度条分多少次更新完，默认为10，如果实际更新次数超过这个值则进度条会回到开始位置
text	String	显示在进度条上的文字，默认为空
fn	Function	在进度条更新完毕后被调用，该回调函数没有参数。当duration配置项不存在时，回调函数会被忽略
scope	Object	回调函数的执行范围

返回值: Ext.ProgressBar

示例代码:

Ext.onReady(function() {
	var progressBar = new Ext.ProgressBar({
		text: 'waiting...',
		width: 300,
		renderTo: ProgressBar
	});
	
	progressBar.wait({
		duration: 10000,
		interval: 1000,
		increment: 10,
		text: 'waiting...',
		scope: this,
		fn: function() {
			Ext.MessageBox.alert('Information', '更新完毕');
		}
	});
});

到这里，Ext.ProgressBar的使用介绍完了。在以后的学习中，将给出大量的示例，供大家参考。

来源：oschina

链接：https://my.oschina.net/u/2265030/blog/506072

标签

Ext.ProgressBar