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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
Firebug 字幕文件JSON地址获取代码
Oct 28 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
40款非常棒的jQuery 插件和制作教程(系列一)
Oct 26 Javascript
JS小功能(setInterval实现图片效果显示时间)实例代码
Nov 28 Javascript
jquery Tab效果和动态加载的简单实例
Dec 11 Javascript
给html超链接设置事件不使用href来完成跳
Apr 20 Javascript
采用call方式实现js继承
May 20 Javascript
分享12个非常实用的JavaScript小技巧
May 11 Javascript
打造通用的匀速运动框架(实例讲解)
Oct 17 Javascript
vue实现百度下拉列表交互操作示例
Mar 12 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
php通过exif_read_data函数获取图片的exif信息
2015/05/21 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
php生成验证码函数
2015/10/20 PHP
PHP7生产环境队列Beanstalkd用法详解
2020/05/19 PHP
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
浅谈JavaScript数据类型
2015/03/03 Javascript
jQuery里filter()函数与find()函数用法分析
2015/06/24 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
2015/08/28 Javascript
浅谈jquery高级方法描述与应用
2016/10/04 Javascript
jquery仿京东商品放大浏览页面
2017/06/06 jQuery
Angular设置别名alias的方法
2018/11/08 Javascript
JavaScript ECMA-262-3 深入解析(一):执行上下文实例分析
2020/04/25 Javascript
JS如何判断对象是否包含某个属性
2020/08/29 Javascript
[01:09:13]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第三场 1月19日
2021/03/11 DOTA
重命名批处理python脚本
2013/04/05 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python中的错误和异常处理简单操作示例【try-except用法】
2017/07/25 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python爬取各类文档方法归类汇总
2018/03/22 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
基于Python实现签到脚本过程解析
2019/10/25 Python
python/Matplotlib绘制复变函数图像教程
2019/11/21 Python
Python xlrd模块导入过程及常用操作
2020/06/10 Python
Python爬虫爬取博客实现可视化过程解析
2020/06/29 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
新西兰最大的天然保健及护肤品网站:HealthPost(直邮中国)
2021/02/13 全球购物
下面代码从性能上考虑,有什么问题
2015/04/03 面试题
作文评语集锦大全
2014/04/23 职场文书
金融系应届毕业生求职信
2014/05/26 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
2016年质量月活动总结报告
2016/04/05 职场文书
导游词之平津战役纪念馆
2019/11/04 职场文书
python tkinter实现定时关机
2021/04/21 Python
Python时间操作之pytz模块使用详解
2022/06/14 Python