[ExtJs5.1.0系列-第2天] 信息提示框组件

    在介绍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.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_alert);  
	function callback_alert(id) {
		console.log("单击的按钮ID是: " + id);
	}
});

    运行结果:

    [ExtJs5.1.0系列-第2天] 信息提示框组件<Ext.MessageBox><图片内容仅作为示例,实际点击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.Msg.confirm('Information', 'Hello World, LvSantorini', callback_confirm);
function callback_confirm(id) {
	if (id == 'yes') {
		console.log("单击的按钮ID是: " + id);
	}
	if (id == 'no') {
		console.log("单击的按钮ID是: " + id);
	}
}

    运行结果:

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

3.  Ext.MessageBox.prompt()

    显示一个获取用户输入信息的提示框,用来代替JavaScript标准的prompt()方法,有两个按钮"确定"和"取消",并提供文本输入框接收用户的输入,如果为其提供一个回调函数,则该函数将在单击按钮后被调用,所单击按钮的id和文本框中的内容将作为参数传递到回调函数.

    调用格式:

    prompt(String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value])

    参数说明:

        前4项参数说明参考Ext.MessageBox.alert()相关内容.

        [Boolean/Number multiline]: 设置为false将显示一个单行文本域,设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认为false

        [String value]: 设置文本输入框中的默认值

    返回值: Ext.widnow.MessageBox

    示例代码:

Ext.onReady(function() {  
	Ext.Msg.prompt('Information', '请输入些什么吧...', callback_prompt, this, false, '我是默认值');
	function callback_prompt(id, msg) {
		if (id == 'ok') {
			console.log("单击的按钮ID是:" + id + "; 输入的内容是:" + msg);
		}
		if (id == 'cancel') {
			console.log("单击的按钮ID是:" + id + "; 输入的内容是:" + msg);
		}
	}
});

    运行结果:

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

4.  Ext.MesssageBox.wait()

    显示一个自动滚动的进度条提示框,它经常被用在一个耗时的交互操作当中,它不能定义一个时间间隔自动关闭,程序员有责任在交互操作完成之后去关闭它。

    调用格式:

        wait(String msg, [String title], [Object config])

    参数说明:

        msg: 显示的信息内容;

        [String title]: 提示框的标题,为可选参数;

        [Object config]: 用于配置进度条的配置对象,为可选参数. [Ext.ProgressBar.wait]

    返回值: Ext.window.MessageBox

    示例代码:

Ext.onReady(function() {  
	Ext.Msg.wait('请耐心等待,操作将在几分钟内完成...', 'Information');
});

    运行结果:

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

5.  Ext.MessageBox.show()

    基于配置来显示新的信息提示框或重置一个已存在的信息提示框,前面介绍的4个提示框内部调用的都是这个方法,尽管那些调用都简单快捷,但是它们并不支持所有的配置项,要建立更加个性化,功能强大的提示框还需要从掌握Ext.MessageBox.show方法做起。

    调用格式:

        show(Object config)

    参数说明:

        一个包含提示框配置信息的配置对象

    返回值: Ext.window.MessageBox

    下面的表格中列出了Ext.MessageBox.show配置对象的常用配置项。 

                                                                                                                            Ext.MessageBox常用配置项

配置项 类型 说明
title String 提示框的标题
msg String 显示的信息内容
width Number 对话框的宽度,以像素为单位
maxWidth Number 对话框的最大宽度,默认为600像素
minWidth Number 对话框的最小宽度,默认为100像素
closable Boolean

false将隐藏右上角的关闭按钮,默认为true.如果已设置wait或progress为true,则该配置将被忽略,提示框只能通过程序关闭,不能通过右上角的关闭按钮关闭

modal Boolean true为模式窗口,false为非模式窗口
fn Function

回调函数,他将在点击控制按钮,关闭按钮或者输入按钮,离开对话框时被调用,如果已设置wait或progress为true则该配置被忽略.

参数说明:

buttonId: 按钮id,如ok,yes,no,cancel

text:输入的文字

opt: 传入show方法的配置对象

buttons Number/Boolean 按钮组,默认为false,不显示任何按钮
progress Boolean True则显示一个进度条,默认为false,该进度条需要由程序控制滚动
progressText String 进度条上显示的问题,默认为''
proxyDrag Boolean True则像是一个高亮的拖动代理,默认为false
wait Boolean True则显示一个自动滚动的进度条,默认为false
waitConfig
Object 等待进度条的配置对象,在wait为true时有效
prompt Boolean True则显示一个单行文本域,默认为false
value Boolean 如果prompt设置为true,则value值将显示在文本域中
multiline Boolean 如果prompt设置为true,则multiline为true显示为多行文本区,false显示单行文本域
defaultTextHeight Number 多行文本区的默认高度,默认值为75像素
icon String 一个样式文件,它为对话框提供一个背景图,下边还有一个详细列表

                       Buttons已提供配置对象说明

提示框按钮配置对象 说明
Ext.Msg.CANCEL 只显示一个"取消"按钮
Ext.Msg.NO 只显示一个"否"按钮
Ext.Msg.OK 只显示一个"确定"按钮
Ext.Msg.OKCANCEL 显示"确定"和"取消"按钮
Ext.Msg.YES 只显示一个"是"按钮
Ext.Msg.YESNO 显示"是"和"否"按钮
Ext.Msg.YESNOCANCEL 显示"是","否"和"取消"按钮

               icon配置项常用值

样式类 说明
Ext.Msg.ERROR 错误图标
Ext.Msg.IFNO 信息图标
Ext.Msg.QUESTION 问题图标
Ext.Msg.WARNING 警告图标

    示例代码:

Ext.onReady(function() {
	Ext.MessageBox.show({
		titile: 'Information',
		msg: '一个信息输入框,三个按钮',
		icon: Ext.MessageBox.INFO,
		buttons: Ext.MessageBox.YESNOCANCEL,
		fn: callback_show,
		prompt: true,
		modal: true
	});
	
	function callback_show(id, msg) {
		console.log('输入内容为:' + msg + '; 点击了按钮:' + id);
	}
});

    运行结果:

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

以上介绍了Ext.MessageBox的各种常用提示对话框组件以及如何自定义对话框,下面我们来看看Ext.MessageBox还为我们提供了哪些其他功能

------------------------------------------------------------------------------------------------------------- 小白Vv白白 的分割线 -------------------------------------------------------------------------------------------------------------

1. 改变默认的按钮文字

示例代码:

Ext.onReady(function() {
	Ext.Msg.buttonText.ok = '确定';
	Ext.Msg.buttonText.cancel = '取消';
	
	Ext.MessageBox.show({
		title: 'Information',
		msg: '信息提示对话框',
		modal: true,
		buttons: Ext.MessageBox.OKCANCEL,
		fn: callback_show
	});
	function callback_show(id) {
		console.log('点击了按钮:' + id);
	}
});

    运行结果:

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

2. 动态更新提示框

  • 更新提示文字(msg)

    调用格式: updateText([String text])

    参数说明:

        [String text]: 显示的信息内容,为可选参数

    返回值: Ext.windw.MessageBox

    示例代码:

Ext.onReady(function() {
	var msgBox = Ext.MessageBox.show({
		title: 'Information',
		msg: '动态更新文字',
		buttons: Ext.MessageBox.OK,
		fn: function() {
			// 停止定时任务
			Ext.TaskManager.stop(task);
		}
	});
	// Ext.TaskManager是一个功能类,用来定时执行程序
	var task = {
		run:function() {
			msgBox.updateText("当前时间: " + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));
		},
		interval: 1000
	}
	Ext.TaskManager.start(task);
});

    运行结果:

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

  • 更新进度条及提示信息

    调用格式:    

        updateProgress(Number value, String progressText, String msg)

        该方法在progress: true的情况下会生效

    参数说明:

        value: 0~1的数字,默认为0

        progressText: 进度条上显示的文字

        msg: 显示的信息内容

    返回值: Ext.window.MessageBox
    示例代码:

Ext.onReady(function() {
	var msgBox = Ext.MessageBox.show({
		title: 'Information',
		msg: '动态更新进度条和信息文字',
		modal: true,
		progress: true
	});
	
	var count = 0; //滚动条被刷新次数
	var percentage = 0; //进度百分比
	var progressText = ''; //进度条信息
	
	var task = {
		run: function() {
			count ++;
			// 计算进度
			percentage = count / 10;
			// 进度条显示文字信息
			progressText = '当前完成度: ' + percentage * 100 + "%";
			msgBox.updateProgress(percentage, progressText, '当前时间: ' + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));
			if (count > 10) {
				Ext.TaskManager.stop(task);
				msgBox.hide();
			}
		},
		interval: 1000
	}
	Ext.TaskManager.start(task);
});

    运行结果:

    [ExtJs5.1.0系列-第2天] 信息提示框组件<Ext.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系列-第2天] 信息提示框组件)