在介绍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需要通过回调函数来控制程序执行。
1525
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
