概要
1、替代古板的对话框
2、alert、confirm、prompt演示
3、与对话框交互：回调函数使用
4、wait及progress对话框
5、使用Msg.show
1、替代古板的对话框
所谓对话框，就是在程序执行的过程，出现在用户界面中的一个需要用户进行确认、选择或录入相关信息的微型窗口。
在传统的html页面中，浏览器提供了三种默认的对话框函数。也就是alert、confirm及prompt等。其中alert用来弹出一个提示信息，并让用户确认，而confirm是让用户进行某一种操作的选择，prompt则是用来弹出一个信息录入对话框。下面是浏览器对话框的使用示例：<head>
<script type="text/javascript">
function alertDialog(){
alert("这是浏览器定义的信息提示框");
}
function confirmDialog(){
var ret=confirm("是否要删除该记录?");
alert("选择结果:"+(ret?"是":"否"));
}
function inputDialog(){
var ret=prompt("请输入你的姓名:","");
alert("你输入的是:"+ret);
}
</script>
</head>
<body>
<input type="button" onClick="alertDialog();" value="信息提示框" />
<input type="button" onClick="confirmDialog();" value="选择对话框"/>
<input type="button" onClick="inputDialog();" value="录入对话框"/>
</body>
由于传统使用alert、confirm等方法产生的对话框非常古板，对话框的很多部份内容都已经固定，很难增加自定义的内容，并且UI很不好看。因此，ExtJS提供了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm等，实现华丽的应用程序界面。
2、Ext中提供的对话框Ext.MessageBox及Ext.Msg
Ext的对话框都封装在Ext.MessageBox类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox或Ext.Msg类直接调用相应的对话框方法来显示漂亮的Ext对话框。使用Ext的对话框功能，上面例子中的三个方法可以改写成如何的形式：
<head>
<!-- 引入ExtJS样式文件 -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"/>
<!-- 引入ExtJS脚本库(两个，一个驱动adapter,另外一个ext-all.js) -->
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"></script>
<script type="text/javascript">
function alertDialog(){
Ext.MessageBox.alert("友情提示","这是浏览器定义的信息提示框");
}
function confirmDialog(){
var ret=Ext.Msg.confirm("删除确认","是否真的要删除该记录?",function(btn){
alert("选择结果:"+(btn=="yes"?"是":"否"));
});
}
function inputDialog(){
Ext.MessageBox.prompt("姓名输入","请输入你的姓名:",function(btn,text){
if(btn=="ok"){
alert("你输入的是:"+text);
}else {
alert("你放弃了录入!");
}
});
}
</script>
</head>
<body>
<input type="button" onClick="alertDialog();" value="信息提示框" />
<input type="button" onClick="confirmDialog();" value="选择对话框"/>
<input type="button" onClick="inputDialog();" value="录入对话框"/>
</body>
Ext提供的这些显示普通对话框的方法一般包括四个参数，比如confirm的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ，参数title表示对话框的标题，参数msg表示对话框中的提示信息，这两个参数是必须的；可选的参数fn表示当关闭对话框后执行的回调函数，参数scope表示回调函数执行的作用域。回调函数可以包含两个参数，即button与text,button表示被点击的按钮，text表示对话框中(比如prompt)有输入选项时用户输入的内容。我们可以在回调函数中通过button参数来判断用户作了什么选择，可以通过text来读取在对话框中输入的内容。
3、Ext对话框的特性及回调函数callback
Ext的对话框是包含特定内容的Ext窗口控件，由于Ext的窗口本质上是页面中的DIV标签，因此，Ext对话框中的内容支持各种HTML元素；其次，与浏览对话框可以直接使用赋值语句得到对话框的用户选项及输入内容不同，Ext对话框只能通过回调函数来处理用户的选项及输入的内容。回调函数中对话框显示的时候作为参数传递给相应的对话框显示方法；要注意的一点是，浏览器对话框只有在对话框关闭后才会执行后面的javascript语句，而Ext对话框在显示后会立即执行其后面的语句，而不管对话框是否关闭。
下面使用Ext对话框的方式是不对的：
function inputDialog(){
var ret=Ext.MessageBox.prompt("姓名输入","请输入你的姓名:");
alert("你输入的内容是："+ret);
}
4、wait及progress对话框
MessageBox对象的wait方法用来在页面中显示一个信息等待框，当一个wait信息框显示以后，在应用程序执行了一系列处理操作完成后需要，需要通过调用MessageBox对象的hide()方法来隐藏当前对话框。下面是显示wait对话框的示例代码：
<head>
<!-- 引入ExtJS样式文件 -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"/>
<!-- 引入ExtJS脚本库(两个，一个驱动adapter,另外一个ext-all.js) -->
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"></script>
<script type="text/javascript">
function waitDialog(){
var waitbox=Ext.Msg.wait("正在保存数据，请稍候。。。","友情提示"); //显示等待对话框
waitbox.hide.defer(5000, waitbox); //隐藏对话框
}
</script>
</head>
<body>
<input type="button" onClick="waitDialog();" value="等待对话框" />
</body>
运行结果如下：
下面再来看看带有滚动条的对话框使用，示例代码如下：
<head>
<!-- 引入ExtJS样式文件 -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"/>
<!-- 引入ExtJS脚本库(两个，一个驱动adapter,另外一个ext-all.js) -->
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"></script>
<script type="text/javascript">
var i=0;
function progress(){
i=0;
var msgbox=Ext.Msg.progress("请稍候","保存数据","正在保存数据，请稍候。。。");//显示等待对话框
//执行大数据的处理或网络请求等操作
updateProgress();
}
function updateProgress(){
i+=0.1;
Ext.Msg.updateProgress(i);
if(i>1)Ext.Msg.hide();
else updateProgress.defer(1000);
}
</script>
</head>
<body>
<input type="button" onClick="progress();" value="滚动条对话框" />
</body>
运行结果如下：
5、使用show方法显示对话框
<head>
<meta http-equiv="description" content="This is my page">
<!-- 引入ExtJS样式文件 -->
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/ext-3.2.0/resources/css/ext-all.css"/>
<!-- 引入ExtJS脚本库(两个，一个驱动adapter,另外一个ext-all.js) -->
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/ext-3.2.0/ext-all.js"></script>
<script type="text/javascript">
function callback(btn, text){
if(btn=="yes"){
//执行数据保存操作
alert("保存成功");
}else if(btn=="no"){
//执行数据不保存操作
alert("当前数据没保存");
}else{
//取消当前操作
alert("取消当前操作");
}
}
function save(){
Ext.Msg.show({
title: "保存数据",
msg: "是否保存当前内容？",
buttons: Ext.Msg.YESNOCANCEL,
fn: callback,
icon: Ext.MessageBox.QUESTION
});
}
</script>
</head>
<body>
<input type="button" onClick="save();" value="保存"/>
</body>
运行结果如下：
