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下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
jQuery前端分页示例分享
Feb 10 Javascript
bootstrap学习笔记之初识bootstrap
Jun 21 Javascript
基于JSON数据格式详解
Aug 31 Javascript
Vue2.0设置全局样式(less/sass和css)
Nov 18 Javascript
AngularJS 应用模块化的使用
Apr 04 Javascript
JavaScript实现的九种排序算法
Mar 04 Javascript
Vue实现鼠标经过文字显示悬浮框效果的示例代码
Oct 14 Javascript
详解如何在Javascript中使用Object.freeze()
Oct 18 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
把77A收信机改造成收音机
2021/03/02 无线电
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP+Javascript实现在线拍照功能实例
2015/07/18 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
关于Aptana Studio生成自动备份文件的解决办法
2009/12/23 Javascript
JavaScript 滚轮事件使用说明
2010/03/07 Javascript
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
jquery实现固定顶部导航效果(仿蘑菇街)
2013/03/21 Javascript
js数组的操作详解
2013/03/27 Javascript
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
使用jQuery实现星级评分代码分享
2014/12/09 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
2016/12/22 Javascript
Vue自定义图片懒加载指令v-lazyload详解
2020/12/31 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
javascript设计模式 ? 模板方法模式原理与用法实例分析
2020/04/23 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
vue使用require.context实现动态注册路由
2020/12/25 Vue.js
[02:21]十步杀一人,千里不留行——DOTA2全新英雄天涯墨客展示
2018/08/29 DOTA
python正则表达式去掉数字中的逗号(python正则匹配逗号)
2013/12/25 Python
使用pygame模块编写贪吃蛇的实例讲解
2018/02/05 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
用python解压分析jar包实例
2020/01/16 Python
Django websocket原理及功能实现代码
2020/11/14 Python
python中re模块知识点总结
2021/01/17 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
英国家用电器折扣网站:Electrical Discount UK
2018/09/17 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
学习经验交流会主持词
2014/04/01 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
2015教师节师德演讲稿
2015/03/19 职场文书
高校自主招生校长推荐信
2015/03/23 职场文书
2015年销售人员工作总结
2015/04/07 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
php实现自动生成验证码的实例讲解
2021/11/17 PHP