您的位置：首页 > Web前端 > JavaScript

ExtJS梦想之旅（六）--Ext.MessageBox对话框的使用

2013-07-23 22:38 471 查看

Ext中的对话框统一使用Ext.MessageBox类来描述。Ext.MessageBox用来生成不同样式的消息框的实用类。还可以使用它的别名Ext.Msg。需要注意的是 MessageBox 对象是异步的。不同于 JavaScript中原生的

alert

（它会暂停浏览器的执行），显示MessageBox
不会中断代码的运行。由于这个原因，如果你的代码需要在用户对 MessageBox 做出反馈之后执行，则必须用到回调函数。

ExtJS中对话框的使用相对比较简单，因此在这里就写一个例子直接说明吧，同时将Ext的对话框和传统的对话框做了一个比较，请看下面的例子：

dialog.js

// 普通弹出对话框
function testAlert() {
	Ext.Msg.alert("提示", "普通对话框");
}
// 确认对话框
function testConfirm() {
	// 传统对话框的处理方法
	/*
	 * var ret = confirm("你确定要删除吗？"); if (ret == true) { alert("删除"); } else {
	 * alert("不删除"); }
	 */
	// 这里的回调函数所传递的函数就是这个对话框本身，因此就可以对这个对话框进行一些时间操作了
	Ext.Msg.confirm("提示", "你确定要删除吗？", function(b) {
		if (b == "yes") {
			Ext.Msg.confirm("提示", "你真的要删除吗？", function(b, text) {
				if (b == "yes") {
					Ext.Msg.alert("提示", text);
				}
			});
		} else {
			Ext.Msg.alert("提示", "你单击了no");
		}
	});
}

// 输入对话框
var v = "this is widow";
// 作用域的概念
var b1 = {
	v : "this is b1"
};
function testPrompt() {
	Ext.Msg.prompt("输入框", "请输入姓名", function(btn, text) {
		if (btn == "ok") {
			Ext.Msg.alert("提示", "你输入的姓名是：" + text + "<br/>" + this.v);
		} else {
			Ext.Msg.alert("提示", "您取消了操作");
		}
	}, b1);
}
// wait对话框
function testWait() {
	Ext.Msg.wait("正在处理请稍后。。。。");
}
// 使用Ext自定义对话框
function testMsgShow() {
	Ext.Msg.show({
		title : "保存数据",
		msg : "您已经做了一些数据修改操作，是否要保存当前数据",
		buttons : Ext.MessageBox.OKCANCEL,
		icon : Ext.MessageBox.QUESTION
	});
}

dialog.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ext-对话框</title>
<link href="ext-3.4.1/resources/css/ext-all.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.4.1/ext-all.js"></script>
<script type="text/javascript" src="dialog.js"></script>
</head>
<body>
传统对话框:<a href="javascript:alert('传统普通对话框')">alert对话框</a>
        <a onclick="return confirm('你确认要删除吗？')">cofirm对话框</a>
        <a href="javascript:prompt('请输入姓名')">prompt对话框</a><br>
Ext对话框:<a href="javascript:testAlert()">alert对话框</a>
		<a href="javascript:testConfirm()">confirm对话框</a>
		<a href="javascript:testPrompt()">prompt对话框</a>
		<a href="javascript:testWait()">wait对话框</a><br>
使用Ext创建的自定义对话框:<a href="javascript:testMsgShow()">Ext自定义对话框</a>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航