ExtJS梦想之旅(六)--Ext.MessageBox对话框的使用
2013-07-23 22:38
471 查看
Ext中的对话框统一使用Ext.MessageBox类来描述。Ext.MessageBox用来生成不同样式的消息框的实用类。还可以使用它的别名Ext.Msg。需要注意的是 MessageBox 对象是异步的。不同于 JavaScript中原生的
不会中断代码的运行。由于这个原因,如果你的代码需要在用户对 MessageBox 做出反馈之后执行,则必须用到回调函数。
ExtJS中对话框的使用相对比较简单,因此在这里就写一个例子直接说明吧,同时将Ext的对话框和传统的对话框做了一个比较,请看下面的例子:
dialog.js
dialog.html
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>
相关文章推荐
- Ext Js入门第11篇-使用Ext.window.Window和Ext.window.MessageBox创建对话框
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- 实用ExtJS教程100例-003:进度条对话框Ext.MessageBox.progress
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- 实用ExtJS教程100例-004:等待对话框Ext.MessageBox.wait
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- 实用ExtJS教程100例-005:自定义对话框Ext.MessageBox.show
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- Extjs Ext.MessageBox.confirm 确认对话框详解
- Extjs Ext.MessageBox.confirm 确认对话框详解
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- ExtJS Ext.MessageBox.alert()弹出对话框详解
- (8) Extjs4.2 等待对话框Ext.MessageBox.wait 自定义对话框Ext.MessageBox.show
- Ext.Net\ExtJs弹出消息Alert、MessageBox、Confirm使用详解
- ExtJs4 笔记(6) Ext.MessageBox 消息对话框
- Extjs4 获取items子控件时使用Ext.getCmp返回undefined
- ExtJS面板的使用(Ext.Panle、Ext.TabPanel、Ext.Viewport)
- ExtJS 基础解析之【Ext.MessageBox】