[ExtJs5.1.0系列-第3天] 進度條組件

時間 2019-12-01

標籤 extjs5.1.0 extjs 系列 3天進度組件简体版

原文原文鏈接

進度條組件介紹

1. 認識Ext.ProgressBar

Ext.ProgressBar是一個可更新的進度條組件，繼承自Ext.Component，該進度條具備2種不一樣的模式: 手工模式和自動模式。在手工模式中程序員要本身控制進度條的顯示、更新、清除；在自動模式中只需調用wait方法，進度條就會自動無限制地滾動下去，它適合爲那些長時間的同步操做進行提示。javascript

下表給出全部組件都有的公共屬性和方法
css

配置項	類型	說明
renderTo	String	指定一個頁面上已經存在的元素或元素id，該元素將會成爲新組件的容器
height	Number	組件的高度單位是像素
width	Number	組件的寬度單位是像素
cls	String	一個可選的樣式表擴展，用於組件元素，經常使用於用戶自定義樣式，默認爲空

注意: renderTo將目標元素做爲新組件的容器，因此它要求目標元素必須能夠直接做爲容器使用，在HTML元素中並非全部元素均可以直接做爲其餘元素的容器。html

2. 手工模式的進度條

手工更新進度條主要是經過調用進度條的updateProgress()方法實現的，它與以前介紹過的updateProgress()方法很是相似，下面介紹如何使用updateProgress()方法
java

調用格式:
程序員

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

參數說明:
ide

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的使用介紹完了。在之後的學習中，將給出大量的示例，供你們參考。