进行测试的jsp文件:
<%@ page language="java" contentType="text/html; charset=gb2312"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>ExtJS的MessageBox测试</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/script/ext4.0/resources/css/ext-all.css" />
<script type = "text/javascript" src="<%=request.getContextPath()%>/script/ext4.0/ext-all.js" ></script>
<script type = "text/javascript" src="<%=request.getContextPath()%>/script/ext4.0/local/ext-lang-zh_CN.js" > </script>
<!-- Ext的MessageBox和Msg都是指向Ext.window.MessageBox. 这些都不是阻塞的。 -->
<script language="javascript">
Ext.onReady(function(){
Ext.Msg.msgButtons[0].setText("好");//OK
Ext.Msg.msgButtons[1].setText("是");//YES
Ext.Msg.msgButtons[2].setText("否");//NO
Ext.Msg.msgButtons[3].setText("取消");//CANCEL
Ext.MessageBox.alert("alert提示框",'<font color=red>支持html格式文本',callBackForAlert);
});
function callBackForAlert(id){
alert("alert信息框的call back, id="+id);
Ext.MessageBox.confirm("confirm提示框","测试",callBackForConfirm);
}
function callBackForConfirm(id){
alert("confirm提示框所选id是:"+id);
Ext.MessageBox.prompt("prompt提示框",'请输入提示',callBackForPrompt,this,true,'默认值');
}
function callBackForPrompt(id,msg){
alert("你的选择是:"+id+", 你的输入是:"+msg);
alert("以下是自定义提示框:");
Ext.Msg.show({
title:'自定义提示',
msg:'提示的内容',
width:300,
height:300,
modal:true,
prompt:true,
multiline:true,
value:'请输入',
buttons:Ext.Msg.OKCANCEL,
fn:callBackForShow,
icon:Ext.Msg.QUESTION
});
}
var msgbox;
function callBackForShow(id,msg){
alert("你的选择是:"+id+", 你的输入是:"+msg);
msgbox = Ext.Msg.alert("时钟","开始", callBackForThreadStop);
task ={
run:function(){
//以下用来更新MessageBox的显示内容
msgbox.updateText("当前时间:"+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
},
interval:1000
};
Ext.TaskManager.start(task);//启动定时任务
}
//这个是Ext的定时任务线程
var task;
//用来停止线程
var count = 0;//刷新次数
var percentage = 0;//百分比
function callBackForThreadStop(){
Ext.TaskManager.stop(task);
//以下测试进度条窗口
//Ext.Msg.wait("进度","进度条窗口"); 这个默认没有modal功能
msgbox=Ext.Msg.show({
title:'进度条',
msg:'正在解压。。。',
width:300,
height:300,
modal:true,
progress:true,
closable:false,
buttons:Ext.Msg.CANCEL,
fn:cancelProgress
});
task ={
run:function(){
count++;
percentage = count/10;
progressText = "进度:"+percentage*100+"%";
msgbox.updateProgress(percentage,progressText,"当前时间:"+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A'));
if(count>=10){
Ext.TaskManager.stop(task);
msgbox.hide();
alert("任务完成!");
}
},
interval:1000
};
Ext.TaskManager.start(task);//启动定时任务
}
function cancelProgress(id){
if(id=='cancel'){
Ext.TaskManager.stop(task);
msgbox.hide();
alert("任务取消!");
}else{
alert(id);
}
}
</script>
</head>
<body>
<h1>ExtJS的MessageBox测试</h1>
</body>
</html>