手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >ExtJS Ext.MessageBox.alert()弹出对话框详解
ExtJS Ext.MessageBox.alert()弹出对话框详解
摘要:复制代码代码如下:Ext.onReady(function(){Ext.Msg.alert('提示','逗号分隔参数列表');//这种方式非...

复制代码 代码如下:

Ext.onReady(function() {

Ext.Msg.alert('提示', '逗号分隔参数列表'); //这种方式非常常见的

});

效果图:

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

复制代码 代码如下:

Ext.onReady(function() {

//定义 JSON(配置对象)

var config = {

title:'提示',

msg: 'JSON配置方式,简单吧'

}

Ext.Msg.show(config);

});

效果图:

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

上边我只是简单举例,好了看到了漂亮的界面了吧!接下来认识一下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()弹出对话框详解3

复制代码 代码如下:

//支持html格式文本

Ext.onReady(function() {

Ext.Msg.alert('<font size=4>提示</font>','<font color=red> 支持html格式文本 </font>');

});

效果图:

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

复制代码 代码如下:

<script type="text/javascript">

Ext.onReady(function() {

alert('我会停止程序的执行');

Ext.Msg.alert('提示','我不会停止程序的执行');

});

</script>

效果图:

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

复制代码 代码如下:

<script type="text/javascript">

Ext.onReady(function() {

Ext.Msg.alert('提示','我不会停止程序的执行');

alert('我会停止程序的执行');

});

</script>

效果图:

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

看到效果了很简单很简单吧!下面我们了解一下怎么回调函数,一个只读信息提示框,用来代替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()弹出对话框详解7

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

点击x的效果

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

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

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

【ExtJS Ext.MessageBox.alert()弹出对话框详解】相关文章:

JavaScript的Date()方法使用详解

Javascript中的getUTCHours()方法使用详解

浅析JavaScript中的事件机制

JavaScript中的toLocaleLowerCase()方法使用详解

JSON字符串和对象之间的转换详解

JavaScript中的replace()方法使用详解

JavaScript中的anchor()方法使用详解

JS实现浏览器菜单命令

JavaScript中valueOf()方法的使用介绍

JavaScript中的acos()方法使用详解

精品推荐
分类导航