文档章节

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

LvSantorini
 LvSantorini
发布于 2015/09/11 09:15
字数 2728
阅读 1515
收藏 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);
	}
});

    运行结果:

    <图片内容仅作为示例,实际点击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);
	}
}

    运行结果:

    

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);
		}
	}
});

    运行结果:

        

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');
});

    运行结果:

    

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);
	}
});

    运行结果:

    

以上介绍了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);
	}
});

    运行结果:

    

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);
});

    运行结果:

    

  • 更新进度条及提示信息

    调用格式:    

        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);
});

    运行结果:

    

    注意:

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

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

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

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


© 著作权归作者所有

LvSantorini
粉丝 13
博文 37
码字总数 40332
作品 0
呼和浩特
程序员
私信 提问
[ExtJs5.1.0系列-第1天] 初识ExtJs5.1.0

ExtJs是用JavaScript、CSS和HTML等技术实现的主要用于创建用户界面,且与后台技术无关的前端Ajax框架,还被用来开发RIA(富客户端)的Web应用。ExtJs的使用与Java中AWT,Swing编程十分相像(做过...

LSantorini
2015/09/08
1K
0
EXT窗口

Alert提示框 Ext的对话框都封装在Ext.MessageBox类,该类还有一个简写形式即Ext.Msg,可以直接通过Ext.MessageBox或Ext.Msg来直接调用相应的对话框方法来显示Ext对话框。 confirm 除了alert...

晨曦之光
2012/03/09
106
0
[ExtJs5.1.0系列-第6天]Form表单 之 表单面板(Ext.form.Panel)

对于从事Web开发的程序员来说,接触最多的就是表单的操作。传统的HTML表单给人一种功能单一风格朴素的印象。这个问题在ExtJs的表单上有了很大程度的改善,ExtJs对于常用表单功能给出了优秀的...

LSantorini
2015/10/01
2.3K
0
[ExtJs5.1.0系列-第4天]工具栏和菜单栏(1)-工具栏介绍

工具栏和菜单栏 前两节的内容,我们介绍了信息提示框和进度条,对ExtJs组件的配置及使用有了一定认识。本节内容将介绍工具栏(Ext.toolbar.Toolbar)组件和菜单(Ext.menu.Menu)组件的使用。 (本...

LSantorini
2015/09/17
721
0
PhoneGap+Cordova+SenchaTouch-04-退出程序和对话框的使用

sencha touch 2.4.1对话框的使用是很简单的。 下面简单介绍下st对话框的使用,查看官方文档,在Ext.Msg中,找到show 方法,有个示例挺好 图1 按着示例做就搞定了! 我的代码如下,也是示例。...

jxlgzwh
2015/02/07
266
0

没有更多内容

加载失败,请刷新页面

加载更多

设计模式之访问者模式

定义 Represent an operation to be performed on the elements of an object structure. Visitor lets you define a new operation without changing the classes of the elements on which......

陈年之后是青葱
昨天
10
0
PhotoShop 高级应用 : 分层云彩 - 简单闪电效果

1.创建黑白渐水平渐变图层 2.选择滤镜选项卡: 渲染--->分层云彩功能 3.将滤镜-云彩效果渲染后的图层进行反相操作 【此时出现闪电效果】 6.调整色阶,使得闪电效果更明显 7.创建剪贴蒙版:色...

东方墨天
昨天
11
0
三种实现Android主界面Tab的方式

三种实现Android主界面Tab的方式 https://www.cnblogs.com/caobotao/p/5103673.html

shzwork
昨天
11
0
java8-Optional类

背景 NPE问题,100%的Java程序员都碰到,并且曾经是心中的痛。 1965年英国TonyHoare引入了Null引用,后续的设计语言包括Java都保持了这种设计。 一个例子 业务模型 Person 有车一族, 有Car...

春天springcarter
昨天
11
0
py 登录github时token以及cookie的应用

import requestsfrom bs4 import BeautifulSoup## 获取tokenr1 = requests.get('https://github.com/login')s1 = BeautifulSoup(r1.text,'html.parser')token = s1.find(name='input',......

子枫Eric
昨天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部