[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的使用介绍完了。在以后的学习中，将给出大量的示例，供大家参考。