码迷,mamicode.com
首页 > Web开发 > 详细

[ExtJs5.1.0系列-第二天] 信息提示框组件<Ext.MessageBox>

时间:2015-09-11 10:51:39      阅读:207      评论:0      收藏:0      [点我收藏+]

标签:

    在介绍ExtJs信息提示框组件之前,我们先来介绍一下ExtJs的组件配置。

    ExtJs组件通常有两种配置形式: (1) 用逗号分割的参数列表;  (2) 使用JSON对象作为组件提供配置信息。对于比较简单的配置一般采用逗号分隔的参数列表进行设置,对于较复杂的配置一般采用JSON对象的方式为组件提供配置信息。

    JSON简单介绍:

    JSON的全称是JavaScript Object Notation(JavaScript对象符号)。JSON是一种结构化的,轻量级的,完全独立于语言的,基于文本的数据传输格式,在很多场合下用来替代XML文件格式。在表达相同的信息时,JSON比XML形成的文件更小、更便于机器解析。

    JSON格式非常适合于那些具有一些属性和值得简单对象,它以"{"开始,以"}"结束,属性名和值用":"分隔,属性间用","分隔。

    更多关于JSON的介绍,请移步: http://www.json.org/ (都是很简单的英文,大家看一下,后续有时间将在博客中介绍JSON的使用)

----------------------------------------------------------------------------------------------------- 信 息 提 示 框 组 件 -----------------------------------------------------------------------------------------------------

    信息提示框组件介绍:

    认识Ext.window.MessageBox

    Ext.window.MessageBox是一个工具类,它继承自Ext.window.Window对象,用来生成各种风格的信息提示对话框,其实例对象可通过Ext.MessageBox或Ext.Msg进行访问,使用Ext.MessageBox和使用Ext.Msg效果相同。下面将介绍ExtJs中各种各样的信息组件提示框。

    1. Ext.MessageBox.alert()

    一个只读信息提示框,用来代替JavaScript标准的alert()方法,有一个确定按钮,如果为其提供一个回调函数,则该函数将在单击按钮后被调用(不包括右上角的退出按钮),所单击按钮的id将被作为唯一的参数传递到回调函数中。

    调用格式: 

        alert(String title, String msg, [Function fn], [Object scope])

    参数说明:

        title: 提示框的标题;

        msg: 显示的信息内容;

        [Function fn]: (可选) 回调函数;

        [Object scope]: (可选) 回调函数的作用域。

    返回值: Ext.window.MessageBox

    示例代码:

Ext.onReady(function() {  
	Ext.Msg.alert(‘Information‘,‘Hello World, LvSantorini‘, callback);  
	function callback(id) {
		console.log("单击的按钮ID是: " + id);
	}
});

    运行结果:

    技术分享<图片内容仅作为示例,实际点击OK按钮,信息提示框消失,然后控制台输出>

    注意:ExtJs中方法调用格式中的参数名称不同于Java,如果使用JSON配置方法,每个参数的类型要对应,名称也要对应(JSON配置将在本小节最后讲到)

    2. Ext.MessageBox.confirm()

    显示一个确认信息提示框,用来代替JavaScript标准的confirm()方法,具有两个按钮"是"和"否",如果为其提供一个回调函数,则该函数将在单击按钮后被调用,所单击按钮的id将被作为唯一的参数传递到回调函数中。

    调用格式:

        confirm(String title, String msg, [Function fn], [Object scope])

    参数说明: 参数含义与Ext.MessageBox.alert()相同

    返回值: Ext.widnow.MessageBox

    注意:

    Ext.MessageBox提供的信息提示框与JavaScript提供的原始信息提示框alert的差别:

    1. 实现方式。标准JavaScript提供的信息提示框对话框是一个真正的弹出窗口,而Ext.MessageBox提供的对话框是在当前页面显示一个层(div);

    2. 显示信息的格式。标准JavaScript提供的信息提示对话框中所显示的内容只能是纯文本,不可以显示HTML格式文本,也不可使用HTML中格式化方法进行排版,而Ext.MessageBox既支持纯文本也同样可以使用HTML格式文本,显示效果丰富多彩;

    3. 对程序运行的影响。标准JavaScript提供的信息提示框会对JavaScript程序的运行产生阻塞,而Ext.MessageBox是异步的,它的调用不会停止浏览器中代码的执行。如果需要实现JavaScript信息提示框的功能,Ext.MessageBox需要通过回调函数来控制程序执行。


[ExtJs5.1.0系列-第二天] 信息提示框组件<Ext.MessageBox>

标签:

原文地址:http://my.oschina.net/LvSantorini/blog/504770

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!