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 相关文章推荐
js 全兼容可高亮二级缓冲折叠菜单
Jun 04 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
IE6兼容透明背景图片及解决方案
Aug 19 Javascript
JS+CSS实现的经典tab选项卡效果代码
Sep 16 Javascript
jQuery实现文本框邮箱输入自动补全效果
Nov 17 Javascript
javascript判断元素存在和判断元素存在于实时的dom中的方法
Jan 17 Javascript
JavaScript实现无穷滚动加载数据
May 06 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
详解vue-cli+es6引入es5写的js(两种方法)
Apr 19 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
Nov 27 Javascript
JS求解两数之和算法详解
Apr 28 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
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
PHP扩展CURL的用法详解
2014/06/20 PHP
PHP 7.0新增加的特性介绍
2017/06/08 PHP
PHP数组常用函数实例小结
2018/08/20 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
JS 获取浏览器和屏幕宽高等信息代码
2014/03/31 Javascript
微信小程序 触控事件详细介绍
2016/10/17 Javascript
微信和qq时间格式模板实例详解
2016/10/21 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
微信小程序如何实现五星评价功能
2019/10/15 Javascript
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
Python定时发送消息的脚本:每天跟你女朋友说晚安
2018/10/21 Python
分享Python切分字符串的一个不错方法
2018/12/14 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
如何用Python绘制3D柱形图
2020/09/16 Python
结合CSS3的布局新特征谈谈常见布局方法
2016/01/22 HTML / CSS
网络信息管理员岗位职责
2014/01/05 职场文书
《悯农》教学反思
2014/04/28 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2015年度个人思想工作总结
2015/04/08 职场文书
工程款申请报告
2015/05/15 职场文书
退税申请报告怎么写
2015/05/18 职场文书
从事会计工作年限证明
2015/06/23 职场文书
八一建军节主持词
2015/07/01 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
公务员岗前培训心得体会
2016/01/08 职场文书
教你使用Python获取QQ音乐某个歌手的歌单
2022/04/03 Python
python使用shell脚本创建kafka连接器
2022/04/29 Python