在介绍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中各种各样的信息组件提示框。
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需要通过回调函数来控制程序执行。