ExtJS Ext.MessageBox.alert()弹出对话框详解


Posted in Javascript onApril 02, 2010
Ext.onReady(function() { 
Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的 
});

效果图:
ExtJS Ext.MessageBox.alert()弹出对话框详解
Ext.onReady(function() { 
//定义 JSON(配置对象) 
var config = { 
title:'提示', 
msg: 'JSON配置方式,简单吧' 
} 
Ext.Msg.show(config); 
});

效果图:
ExtJS Ext.MessageBox.alert()弹出对话框详解
上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识一下Ext.MessageBox
Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种风格的信息提示对话框,Ext.Msg是该类的别名,使用Ext.MessageBox和用Ext.Msg效果是一样的,而后者提供了更简单的方式。在介绍前,下来了解Ext.MessageBox提供的信息提示框与JavaScript提供的原始信息提示框的差别,主要表现在3个方面,他们分别是“实现方式”、“显示信息的格式”、和“对程序运行的影响”,下面对着3方面分别进行详细说明。
1、 实现方式:
标准JavaScript提供的信息提示对话框是一个真正的弹出窗口。Ext.MessageBox提供的信息提示对话框并不是真正的弹出窗口,他只是在当前页面显示的一个层(div),所以无法用窗口扑捉到软件来的到他
2、 显示信息的格式:
标准JavaScript提供的信息提示对话框中显示的内容不是HTML格式文本,而是纯文本。
不能使用HEML中的格式化方法进行排版,只能以空格、回车以及各种标点符来构建显示格式。
Ext.MessageBox提供的信息提示对话框显示的文本不仅支持纯文本显示还支持用HTML格式文本,采用HTML中的格式化方法进行排版,效果更加丰富多彩。下面是一个简单的示例。
<script type="text/javascript"> 
alert('只能用纯文本');//这里不支持HTML格式的字符串 
</script>

效果图:
ExtJS Ext.MessageBox.alert()弹出对话框详解
//支持html格式文本 
Ext.onReady(function() { 
Ext.Msg.alert('<font size=4>提示</font>','<font color=red> 支持html格式文本 </font>'); 
});

效果图:
ExtJS Ext.MessageBox.alert()弹出对话框详解
<script type="text/javascript"> 
Ext.onReady(function() { 
alert('我会停止程序的执行'); 
Ext.Msg.alert('提示','我不会停止程序的执行'); 
}); 
</script>

效果图:
ExtJS Ext.MessageBox.alert()弹出对话框详解
<script type="text/javascript"> 
Ext.onReady(function() { 
Ext.Msg.alert('提示','我不会停止程序的执行'); 
alert('我会停止程序的执行'); 
}); 
</script>

效果图:
ExtJS Ext.MessageBox.alert()弹出对话框详解
看到效果了很简单很简单吧!下面我们了解一下怎么回调函数,一个只读信息提示框,用来代替JavaScript标准的alert()方法有一个确定按钮,如果其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的推出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。
调用格式:
alert( String title,String msg,[function fn],[Object scope]);
//参数说明
title: 提示框的标题
msg: 显示的信息内容
[function fn]: (可选) 回调函数
[Object scopt]: (可选) 回调函数的作用域
返回值:
Ext.MessageBox
示例:
<script type="text/javascript"> 
Ext.onReady(function() { 
Ext.MessageBox.alert('提示', '请单击我 确定', callBack); 
function callBack(id) { 
alert('单击的按钮id是:'+id); 
} 
}); 
</script>

效果图:
点击OK的效果
ExtJS Ext.MessageBox.alert()弹出对话框详解     ExtJS Ext.MessageBox.alert()弹出对话框详解

点击x的效果

ExtJS Ext.MessageBox.alert()弹出对话框详解    ExtJS Ext.MessageBox.alert()弹出对话框详解

 

提示:由于ExtJS的alert是异步执行的不会产生阻塞,因此要将用户确认后才执行的代码放在回调函数中,否则在用户确认后续代码就会执行造成不必要的错误,这一点需要我们注意的。

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
js null undefined 空区别说明
Jun 13 Javascript
JavaScript快速检测浏览器对CSS3特性的支持情况
Sep 26 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
微信小程序 PHP后端form表单提交实例详解
Jan 12 Javascript
Bootstrap table使用方法汇总
Nov 17 Javascript
如何快速解决JS或Jquery ajax异步跨域的问题
Jan 08 jQuery
工作中常用到的ES6语法
Sep 04 Javascript
通过cordova将vue项目打包为webapp的方法
Feb 02 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
vue实现整屏滚动切换
Jun 29 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 #Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 #Javascript
js 刷新页面的代码小结 推荐
Apr 02 #Javascript
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 #Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 #Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 #Javascript
初试jQuery EasyUI 使用介绍
Apr 01 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
php实现的IMEI限制的短信验证码发送类
2015/05/05 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
phpQuery采集网页实现代码实例
2020/04/02 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
HTML5如何适配 iPhone IOS 底部黑条
2021/03/09 HTML / CSS
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
js中cookie的添加、取值、删除示例代码
2013/10/21 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
基于Javascript实现返回顶部按钮
2016/02/29 Javascript
jQuery事件绑定on()与弹窗实现代码
2016/04/28 Javascript
JavaScript 控制字体大小设置的方法
2016/11/23 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
2017/01/10 Javascript
基于MVC方式实现三级联动(JavaScript)
2017/01/23 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
详解webpack编译速度提升之DllPlugin
2019/02/05 Javascript
Python中的jquery PyQuery库使用小结
2014/05/13 Python
Python文件去除注释的方法
2015/05/25 Python
python直接访问私有属性的简单方法
2016/07/25 Python
Python中collections模块的基本使用教程
2018/12/07 Python
python3 自动识别usb连接状态,即对usb重连的判断方法
2019/07/03 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
详解Pandas 处理缺失值指令大全
2020/07/30 Python
Vs Code中8个好用的python 扩展插件
2020/10/12 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
大韩航空官方网站:Korean Air
2017/10/25 全球购物
面料业务员岗位职责
2013/12/26 职场文书
保证书格式范文
2014/04/28 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
原告代理词范文
2015/05/25 职场文书