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 相关文章推荐
基于JavaScript 类的使用详解
May 07 Javascript
js加入收藏夹代码(兼容ie/ff/op)
May 16 Javascript
创建一个类Person的简单实例
May 17 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Angular 2父子组件数据传递之@Input和@Output详解 (上)
Jul 05 Javascript
微信小程序三级联动地址选择器的实例代码
Jul 12 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
详解利用eventemitter2实现Vue组件通信
Nov 04 Javascript
JS通过识别id、value值对checkbox设置选中状态
Feb 19 Javascript
JavaScript面向对象核心知识与概念归纳整理
May 09 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
JavaScript实现登录窗体
Jun 22 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
PHP排序之二维数组的按照字母排序实现代码
2011/08/13 PHP
php解压文件代码实现php在线解压
2014/02/13 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php计算当前程序执行时间示例
2014/04/24 PHP
PHP中使用strpos函数实现屏蔽敏感关键字功能
2014/08/21 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
PHP实现文件下载【实例分享】
2017/04/28 PHP
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
Express的路由详解
2015/12/10 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
微信小程序 富文本转文本实例详解
2016/10/24 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
老生常谈Bootstrap媒体对象
2017/07/06 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
JavaScript实现带有子菜单和控件的slider轮播图效果
2017/11/01 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
2018/09/05 jQuery
玩转Koa之核心原理分析
2018/12/29 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
如何用Python破解wifi密码过程详解
2019/07/12 Python
Windows+Anaconda3+PyTorch+PyCharm的安装教程图文详解
2020/04/03 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
Joseph官网:英国小众奢侈品牌
2019/05/17 全球购物
PREMIUM-MALL法国:行李、箱包及配件在线
2019/05/30 全球购物
学雷锋演讲稿
2014/03/04 职场文书
喷漆工的岗位职责
2014/03/17 职场文书
党的群众教育实践活动实施方案
2014/06/12 职场文书
小学生志愿者活动方案
2014/08/23 职场文书
劳动仲裁撤诉申请书
2015/05/18 职场文书
2019销售早会主持词
2019/06/27 职场文书
Oracle 触发器trigger使用案例
2022/02/24 Oracle
Python可视化学习之seaborn调色盘
2022/02/24 Python
详解MySQL的主键查询为什么这么快
2022/04/03 MySQL