Ext.MessageBox学习，包括alert，confirm，prompt，wait和show的使用方法
2011-07-25 00:09
609 查看
1：基本知识
Note that the MessageBox is asynchronous. Unlike a regular JavaScript
注意MessageBox是异步的，不同于一般的alert，一般的alert会中止浏览器的执行，但是MessageBox不会使代码停止运行，由于这个原因，如果有一些代码需要在用户操作完成后反馈的话，那么使用callback function（回调函数）
2：Ext.MessageBox.alert()
alert.jsp
使用了回调函数，在上述代码中，MessageBox.alert(标题，内容，回调函数)提供了3个参数，标题是用来修改提示框的标题信息，内容是用来向用户显示提示的信息内容，回调函数是用来接受提示框消失后用户的选择，如果用户点击了"OK"按钮，则返回用户选择的OK，如果用户点击关闭按钮，则返回cancel信息。
演示效果：
3：Ext.MessageBox.confirm()函数
程序效果：
图：点击测试div后的效果图
图：点击Yes后的效果图
图：点击No后的效果
4：Ext.MessageBox.prompt
图：程序效果
图：程序效果
5：prompt显示多行
程序效果：
6:Ext.MessageBox.wait
程序效果：
7：Ext.MessageBox.show
它的功能十分强大，采用config配置的方式，参数很多，列举一些常用的参数：
* animal: 对话框弹出和关闭时的动画效果，例如，设置为"id1", 则从id1处弹出并产生动画，收缩则相反
buttons: 弹出对话框的设置，主要有以下几种，Ext.Msg.OK, Ext.Msg.OKCANCEL, Ext.Msg.CANCAL, Ext.Msg.YESNO, Ext.Msg.YESNOCANCEL，
也可以自定义按钮上的文字：{"ok", "我本来是ok的"}。若设为false，则不显示任何按钮
* closable: 如果为false，则不显示右上角的小叉，默认值为true
* msg: 文本上的内容
* title: 标题
* fn: 关闭弹出框后执行的函数
* con: 弹出框内容前面的图标，取值为Ext.MessageBox.INFO, Ext.MessageBox.ERROR, Ext.MessageBox.WARNING, Ext.Message.QUESTION
* width: 弹出框的宽度，不带单位
* prompt: 设置为true， 则弹出框带有输入框
* progress: 设为true， 则显示进度条
* progressText: 显示进度条上的文字
* wait: true, 动态显示progress
* waitConfig:配置参数，以显示控制progress
程序为：
程序效果：
图：程序图
图：点击Yes后显示的提示框
Note that the MessageBox is asynchronous. Unlike a regular JavaScript
alert(which will halt browser execution), showing a MessageBox will not cause the code to stop. For this reason, if you have code that should only run after some user feedback from the MessageBox, you must use a callback function (see the
functionparameter for show for more details).
注意MessageBox是异步的，不同于一般的alert，一般的alert会中止浏览器的执行，但是MessageBox不会使代码停止运行，由于这个原因，如果有一些代码需要在用户操作完成后反馈的话，那么使用callback function（回调函数）
2：Ext.MessageBox.alert()
alert.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'messagebox.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('test').on('click', function() {
Ext.MessageBox.alert("系统提示", "你要点击我吗，请选择! ", function(but) {
Ext.MessageBox.alert("选择提示", "您选择了" + but);
});
});
});
</script>
</head>
<body>
<div id="test">点击我测试Ext.MessageBox</div>
</body>
</html>使用了回调函数，在上述代码中，MessageBox.alert(标题，内容，回调函数)提供了3个参数，标题是用来修改提示框的标题信息，内容是用来向用户显示提示的信息内容，回调函数是用来接受提示框消失后用户的选择，如果用户点击了"OK"按钮，则返回用户选择的OK，如果用户点击关闭按钮，则返回cancel信息。
演示效果：
3：Ext.MessageBox.confirm()函数
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'messagebox.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('test').on('click', function() {
Ext.MessageBox.confirm("系统提示", "您要点击我吗，请选择", function(but) {
Ext.MessageBox.alert("选择提示", "您选择了" + but);
});
});
});
</script>
</head>
<body>
<div id="test">点击我测试Ext.MessageBox.confirm</div>
</body>
</html>程序效果：
图：点击测试div后的效果图
图：点击Yes后的效果图
图：点击No后的效果
4：Ext.MessageBox.prompt
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'messagebox.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('test').on('click', function() {
Ext.MessageBox.prompt("系统提示", "请输入您的QQ号和密码！嘿嘿",
function(but, text){
alert("您选择了" + but + ":您的QQ信息是" + text);
});
});
});
</script>
</head>
<body>
<div id="test">点击我测试Ext.MessageBox.prompt</div>
</body>
</html> 程序效果图：图：程序效果
图：程序效果
5：prompt显示多行
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'messagebox.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('test').on('click', function() {
Ext.MessageBox.prompt('提示', '输入一些内容看看: ', callBack, this, true);
function callBack(id, msg) {
alert('您单击的按钮id是' + id + '\n' + '输入的内容是: ' + msg);
}
});
});
</script>
</head>
<body>
<div id="test">点击我测试Ext.MessageBox.prompt</div>
</body>
</html>程序效果：
6:Ext.MessageBox.wait
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'messagebox.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('test').on('click', function(){
Ext.MessageBox.wait('增在删除数据中，请稍候.....', "增在删除"); //出现一个等待条
});
});
</script>
</head>
<body>
<div id="test">点击我测试Ext.MessageBox.prompt</div>
</body>
</html>程序效果：
7：Ext.MessageBox.show
它的功能十分强大，采用config配置的方式，参数很多，列举一些常用的参数：
* animal: 对话框弹出和关闭时的动画效果，例如，设置为"id1", 则从id1处弹出并产生动画，收缩则相反
buttons: 弹出对话框的设置，主要有以下几种，Ext.Msg.OK, Ext.Msg.OKCANCEL, Ext.Msg.CANCAL, Ext.Msg.YESNO, Ext.Msg.YESNOCANCEL，
也可以自定义按钮上的文字：{"ok", "我本来是ok的"}。若设为false，则不显示任何按钮
* closable: 如果为false，则不显示右上角的小叉，默认值为true
* msg: 文本上的内容
* title: 标题
* fn: 关闭弹出框后执行的函数
* con: 弹出框内容前面的图标，取值为Ext.MessageBox.INFO, Ext.MessageBox.ERROR, Ext.MessageBox.WARNING, Ext.Message.QUESTION
* width: 弹出框的宽度，不带单位
* prompt: 设置为true， 则弹出框带有输入框
* progress: 设为true， 则显示进度条
* progressText: 显示进度条上的文字
* wait: true, 动态显示progress
* waitConfig:配置参数，以显示控制progress
程序为：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'messagebox.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ext3.2/resources/css/ext-all.css"></link>
<script type="text/javascript" src="ext3.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext3.2/ext-all.js"></script>
<script type="text/javascript" src="ext3.2/src/local/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get('test').on('click', function() {
Ext.MessageBox.show({
title: '标题',
buttons: Ext.Msg.YESNO,
width: 200,
height: 400,
closable: false,
msg: '显示的内容',
fn: function(e, text) {
Ext.MessageBox.alert('您点击的是' + e + "输入的内容为: " + text);
},
icon: Ext.MessageBox.INFO,
prompt: true,
multiline: true
});
});
});
</script>
</head>
<body>
<div id="test">点击我测试Ext.MessageBox.show</div>
</body>
</html>程序效果：
图：程序图
图：点击Yes后显示的提示框
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ExtJs 常用方法(alert confirm prompt show wait)
- ExtJs 常用方法(alert confirm prompt show wait)
- Ext.Net\ExtJs弹出消息Alert、MessageBox、Confirm使用详解
- Ext.MessageBox.show()方法的使用
- ExtJs--02--MessageBox相关弹窗alert，prompt，confirm使用
- Ext.MessageBox.show()方法的使用
- Ext.MessageBox.show()方法的使用
- Javascript中的window对象基本属性和方法以及对alert,confirm,prompt的使用
- Ext.MessageBox.show()方法的使用
- 使用alert、prompt和confirm语句与用户进行交互
- ExtJs--02--MessageBox相关弹出窗口alert，prompt，confirm采用
- Android WebView封装及定制js的alert,confirm和prompt对话框的方法
- Selenium2学习-040-JavaScript弹出框（alert、confirm、prompt）操作演示实例
- messagebox.show使用方法
- Coolite Toolkit学习笔记：服务器端Alert,Confirm,Prompt
- 在Android的webview中定制js的alert,confirm和prompt对话框的方法
- Android webview中定制js的alert,confirm和prompt对话框的方法 (处理webview 带网站地址的弹出框)
- 插件学习之道：ext-jsb-3.0.0.zip共享Ext JS 3.0以上版本在eclipse中使用spket插件设置自动提示的方法
- 在Android的webview中定制js的alert,confirm和prompt对话框的方法