ExtJS 4.2.1+Struts2 实现后台控制进度的进度条（progressbar）

项目中一些收尾的工作，需要将EdoJS替换为ExtJS，其中比较重要的是后台传参的进度条的实现。

1.首先给出ExtJS实现进度条（progress.js）

var progressText;//进度条信息
var progressNum;//滚动条被刷新的次数

function progress(){
var msgBox = Ext.Msg.show({
title:'请等待',
msg:'进程开始',
modal:true,//将msgBox建立为动态窗口，防止窗口重建
width:300,
progress:true,
progressText:'准备中...',
closable: false,//禁止关闭窗口
fn: showResult
});
var t = setInterval(function(){
var percentage = progressNum/100;//进度条百分比
msgBox.updateProgress(percentage, progressNum >= 100 ? '完成！' : progressText);
if(progressNum>=100){
clearInterval(t);//进度条结束后停止计时
Ext.Msg.hide();
progressEnd();//该方法应在调用进度条的页面中定义
}else{
progressIndex();
}
}, 200);
}
function progressIndex(){
Ext.Ajax.request({
url: 'obtProgressParaAction.action',//用来传递进度条参数的Action
method: 'post',
success: function(response){
var data = Ext.decode(response.responseText);//将jsonStr解析出来（String）
var obj = JSON.parse(data.jsonStr);//String转为Object
progressNum = obj.progressNum;
progressText = obj.progressName;
},
fail: function(){
Ext.Msg.alert('获取进度条失败！');
}
});
}
function showResult(action, value){
alert(action + ':' + value);
}

2.由于后台涉及较多，只给出关键代码

①首先创建一个结构体，这里叫做ProgressBufferRAM

/**
*
*/
package tools.progressBar;

/**
* @author YcraD
*
*/
public class ProgressBufferRAM {
///成员变量
private String progressName;//进度名称
private int progressNum;//进度数值（0~100）
private String progressMessage;	//错误信息（初始为“”）
/**
* 无参构造
*/
public ProgressBufferRAM()	{}
/**
* 有参构造
*/
public ProgressBufferRAM(String progressName, int progressNum, String progressMessage)	{
this.progressName = progressName;
this.progressNum = progressNum;
this.progressMessage = progressMessage;
}
/**
* 进度名称[设置方法]
* @param progressName 进度名称
*/
public void setProgressName(String progressName)	{
this.progressName = progressName;
}

/**
* 进度名称[获取方法]
* @return progressName 进度名称
*/
public String getProgressName()	{
return this.progressName;
}

/**
* 进度数值[设置方法]
* @param progressNum 进度数值
*/
public void setProgressNum(int progressNum)	{
this.progressNum = progressNum;
}

/**
* 进度数值[获取方法]
* @return progressNum 进度数值
*/
public int getProgressNum()	{
return this.progressNum;
}
/**
* @return the progressMessage
*/
public String getProgressMessage() {
return progressMessage;
}
/**
* @param progressMessage the progressMessage to set
*/
public void setProgressMessage(String progressMessage) {
this.progressMessage = progressMessage;
}
}

②为了方便与页面交互且使项目层次清晰，再创建一个ProgressBufferStr结构体

package tools.progressBar;

public class ProgressBufferStr {
///成员变量
private String progressName;//进度名称
private String progressNum;//进度数值
private String progressMessage;	//错误信息（初始为“”）

public ProgressBufferStr(){}

public ProgressBufferStr(ProgressBufferRAM buffer){
this.progressName = buffer.getProgressName();
this.progressNum = Integer.toString(buffer.getProgressNum());
this.progressMessage = buffer.getProgressMessage();
}

public String getProgressName() {
return progressName;
}
public void setProgressName(String progressName) {
this.progressName = progressName;
}
public String getProgressNum() {
return progressNum;
}
public void setProgressNum(String progressNum) {
this.progressNum = progressNum;
}
public String getProgressMessage() {
return progressMessage;
}
public void setProgressMessage(String progressMessage) {
this.progressMessage = progressMessage;
}
}

③定义一些对进度条参数的操作方法

由于项目涉及用户管理，所以进度条与登录用户绑定

/**
*
*/
package tools.progressBar;

import java.util.HashMap;
import java.util.Map;

/**
* @author YcraD
*
*/
public class ProgressBuffer {
//Map<用户ID,Buffer数据结构体>
private static Map<String,ProgressBufferRAM> data = new HashMap<String,ProgressBufferRAM>();
/**
* 初始化
* @param idUser	用户ID
* @param name	进度条信息
* @param num	进度数（完成为100）
*/
public static void initValue(String idUser, String name, int num)	{
//若Key不存在，则新建ProgressBufferRAM
if(!data.containsKey(idUser))	{
data.put(idUser, new ProgressBufferRAM());
}
//初始化进度条缓存
data.put(idUser, new ProgressBufferRAM(name,num,""));
}
/**
* 获取进度条数值
* @param curFaci	外循环当前个数
* @param faciLevel	外循环总数
* @param curCal	内循环当前个数
* @param cLevel	内循环总数
* @return
*/
public static int obtProgressnum(int curFaci, int faciLevel, int curCal, int cLevel)	{
int num = (int)(((float)(curFaci-1)*(float)cLevel+curCal)/((float)faciLevel*(float)cLevel)*100f);
if(num==99)	{
num = 100;
}
return num;
}
/**
* 设置进度条参数
* @param idUser	用户ID
* @param name	进度条信息
* @param num	进度条数（完成为100）
*/
public static void setProgressValue(String idUser, String name, int num,String message)	{
data.put(idUser, new ProgressBufferRAM(name,num,message));
}
/**
* 获取进度条信息
* @param idUser	用户ID
* @return
*/
public static ProgressBufferRAM obtProgressValue(String idUser)	{
if(!data.containsKey(idUser))
return null;
else
return data.get(idUser);
}
/**
* 删除指定用户的进度条参数
* @param idUser	用户ID
*/
public static void clear(String idUser)	{
data.remove(idUser);
}

}

④创建Action（Action配置这里省略了）

/**
*
*/
package tools.progressBar;

import com.opensymphony.xwork2.ActionSupport;

/**
* @author YcraD
*
*/
public class ObtProgressParaAction extends ActionSupport {
private static final long serialVersionUID = 1L;
private String jsonStr;//进度结果字符串
/**
* 执行
*/
public String execute() throws Exception	{
String idUser = "007";//这里是测试用户ID
//读取执行进度
ProgressBufferRAM progressPara= ProgressBuffer.obtProgressValue(idUser);
ProgressBufferStr progressStr = new ProgressBufferStr(progressPara);
jsonStr=Edo.util.JSON.Bean2Json(progressStr);
//完成
return SUCCESS;
}

//////////////////////////////GET_SET_METHOD//////////////////////////
/**
* 进度结果字符串[设置方法]
* @param progressValueJsonStr 进度结果字符串
*/
public void setJsonStr(String jsonStr)	{
this.jsonStr = jsonStr;
}

/**
* 进度结果字符串[获取方法]
* @return JsonStr 进度结果字符串
*/
public String getJsonStr()	{
return this.jsonStr;
}

}

3.线程Tread中调用进度条（测试进度条的用例）

package message.service;

import tools.progressBar.ProgressBuffer;

public class DelMessageThread extends Thread {
private String idUser;
private int num = 0;

/**
* 无参构造
*/
public DelMessageThread(){}

public DelMessageThread(String idUser){
this.idUser = idUser;
}

/**
* 启动线程
*/
public void run()	{
//初始化进度条参数
ProgressBuffer.clear(idUser);
ProgressBuffer.initValue(idUser, "开始进度条测试", 0);

try {
Thread.sleep(2000);//暂停Tread
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//设置进度条参数
num = ProgressBuffer.obtProgressnum(1, 1, 1, 3);
ProgressBuffer.setProgressValue(idUser, "开始2s后进入第一阶段", num, "");

try {
Thread.sleep(3000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//设置进度条参数
num = ProgressBuffer.obtProgressnum(1, 1, 2, 3);
ProgressBuffer.setProgressValue(idUser, "开始5s后进入第二阶段", num, "");

try {
Thread.sleep(3000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//设置进度条参数
num = ProgressBuffer.obtProgressnum(1, 1, 3, 3);
ProgressBuffer.setProgressValue(idUser, "开始8s后进入第三阶段", num, "");

ProgressBuffer.setProgressValue(idUser, "进度条测试完成", 100, "");
}
}

4.功能层函数调用Thread

①接口

package message.service;

public interface IMessage {
/**
* 删除消息
* @param idUser
*/
public void fn_delMessage(String idUser);
}

②实现类

package message.service;

public class MessageImpl implements IMessage{

public void fn_delMessage(String idUser) {
// TODO Auto-generated method stub
DelMessageThread t = new DelMessageThread(idUser);//构造线程
t.start();//线程开始
}

}

5.页面调用

①引入progress.js

<script type="text/javascript" src="ExtJs/base/progress.js"></script>

②js中调用

Ext.Ajax.request({
url: 'delMessageAction.action',//测试用Action，不给出代码了
<span style="white-space:pre">	</span>params: {
<span style="white-space:pre">		</span>idUser: '007'
<span style="white-space:pre">	</span>},
<span style="white-space:pre">	</span>success: function() {
<span style="white-space:pre">		</span>progress();//调用进度条
<span style="white-space:pre">		</span>Ext.each(records,function(record){
<span style="white-space:pre">			</span>messStore.remove(record);
<span style="white-space:pre">		</span>});
<span style="white-space:pre">	</span>}
});

③定义progressEnd

function progressEnd(){
Ext.Msg.alert('消息','进度条已完成！');
}

以上就是实现与后台交互的实时进度条