2010.04.13———Ext 之 MessageBox 进度条 等待条 带图像的消息框
2010.04.13———Ext 之 MessageBox 进度条 等待条 带图像的消息框
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>MessageBox</title>
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
<!-- ext-base.js必须在ext-all前面，不然，Ext无法识别 -->
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>
<style type="text/css">
.ext-mb-download {
background:transparent url(images/MessageBox/download.gif) no-repeat top left;
height:30px;
}
</style>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("b1").on("click",function(event){
Ext.Msg.alert("祝贺","你老婆生了！",showMessage);
/*当用户点击按钮或者"X"时，都会调用这个函数，并且默认返回消息框上面按钮的id
*/
});
Ext.get("b2").on("click",function(event){
Ext.Msg.confirm("请问","你确定要了却此生吗？",showMessage);
/*当用户点击按钮或者"X"时，都会调用这个函数，并且默认返回消息框上面按钮的id*/
});
Ext.get("b3").on("click",function(event){
Ext.Msg.prompt("提示","请输入你最恨的人？",showMessageText);
/*当用户点击按钮或者"X"时，都会调用这个函数，并且默认返回消息框上面按钮的id和输入的文本*/
});
Ext.get("b4").on("click",function(event){
Ext.Msg.show({//MessageBox是单例模式，不能实例化，所以一般通过这个show方法来建立MessageBox
title: "输入框",
msg: "请输入一段诗词：",
width: 300,
buttons: {ok:"很好",cancel:"离开"},
multiline: true,//提示用户输入多行文本
fn: showMessageText,
/*
也是传两个参数，一个id,一个text
被按下的按钮的ID，属于如下情况之一:
1.ok
2.yes
3.no
4.cancel
*/
animEl:"b4"//一个id或者元素，作为当打开和关闭消息框时动画效果的起点(终点)
});
});
Ext.get("b5").on("click",function(event){
Ext.Msg.show({
title: "图像",
msg: "注意左边的这个图像<br /> 帅不帅？",
buttons: Ext.Msg.YESNOCANCEL,
fn: showMessage,
animEl:"b4",
icon: Ext.MessageBox.QUESTION
/*
提供一个背景图片，被用作对话框body的图标 (例如Ext.MessageBox.WARNING)
可以为一个一个CSS类；
*/
});
});
Ext.get("b6").on("click",function(event){
Ext.Msg.show({
title: "进度条",
msg: "加载数据",
progressText: "加载中...",//当progress = true时在进展条上面显示的文本
progress: true,//设置为true以显示一个进展条
width: 300,
animEl:"b6"
});
var f = function(v){
return function(){
if(v == 12){
Ext.Msg.hide();//隐藏可见的消息框
Ext.Msg.alert("恭喜","恭喜，数据已加载完成");
}else{
var i = v/11;
Ext.Msg.updateProgress(i, "已完成"+Math.round(100*i)+'%',"开始加载");
/*
更新一个进度条上的文本(progressText)和进度条body里面的文本(msg)。
只与通过 Ext.MessageBox.progress 或者
通过调用 Ext.MessageBox.show 同时progress:true初始化的消息框相关。
三个参数：
1.是0--1之间的一个数
2.是进度条上的文本 ，就是progressText
3.是进度条消息框上的文本，就是msg
*/
}
};
};
for(var i = 1; i < 13; i++){
setTimeout(f(i), i*500);//隔一段时间，执行一次
}
});
Ext.get("b7").on("click",function(event){
Ext.Msg.show({
//title: "保存",
msg: "保存数据中，请稍等...",
progressText: "保存中..",
width: 300,
wait: true,
waitConfig: {interval:200},
icon: "ext-mb-download",//一个在上面定义的CSS类
animEl: "b7"
});
setTimeout(function(){
Ext.Msg.hide();
Ext.Msg.alert("恭喜","恭喜，数据已保存完成");
},5000);
});
/*
一些Ext本身带的背景图片
*/
Ext.fly('info').dom.value = Ext.MessageBox.INFO;
Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
Ext.get("b8").on("click",function(event){
Ext.Msg.show({
title: "呵呵",
msg: "注意左边图像的变换",
buttons: Ext.Msg.OK,
animEl: "b8",
fn: showMessage,
icon: Ext.get('icons').dom.value
});
});
});
function showMessage(btn){
alert("你点击了"+btn);
}
function showMessageText(btn,text){
alert("你点击了"+btn+"，你输入了"+text);
}
</script>
</head>
<body>
<p>
<b>alert弹出按钮</b>
<button id="b1" >show</button>
</p><br />
<p>
<b>confirm确认按钮</b>
<button id="b2" >show</button>
</p><br />
<p>
<b>prompt输入按钮</b>
<button id="b3" >show</button>
</p><br />
<p>
<b>MessageBox输入文本按钮</b>
<button id="b4" >show</button>
</p><br />
<p>
<b>MessageBox带图像的消息框</b>
<button id="b5" >show</button>
</p><br />
<p>
<b>MessageBox进度条</b>
<button id="b6" >show</button>
</p><br />
<p>
<b>MessageBox等待条</b>
<button id="b7" >show</button>
</p><br />
<p>
<b>变换图像</b><br />
选择所需要的图像
<select id="icons">
<option id="error" selected="selected">错误</option>
<option id="info">提示</option>
<option id="question">问答</option>
<option id="warning">警告</option>
</select>
<button id="b8">Show</button>
</p>
</body>
</html>