转自：https://www.cnblogs.com/glsqh/p/5920500.html
Ext.window.MessageBox是一个工具类，他继承自Ext.window.Windoe对象，用来生成各种风格的信息提示对话框，其实例对象可以通过Ext.MessageBox或Ext.Msg进行访问，使用Ext.MessageBox和使用Ext.Msg有相同的效果，而后者提供了更简短的调用方式。为了描述方便后边我们将使用Ext.MessageBox代表Ext.window.MessageBox实例对象。
/**
**Ext.MessageBox和Ext.Msg只是引用了Ext.window.MessageBox的实例对象，Ext.Msg.alert方法调用的是Ext.window.MessageBox实例对象的alert方法，
**避免混淆两者之间的关系
**/
Ext.MessageBox提供的信息提示对话框显示的文本不仅支持纯文本显示，还支持使用HTML格式文本，采用HTML中的格式化方法进行排版，效果更佳丰富多彩 ，甚至可以在提示信息中增加动态图标，使提示信息更加生动。
Ext.Msg.alert("提示","<font color=red>支持HTML格式文本</font>")
标准JS提供的信息提示对话框会对JS程序的运行产生阻塞。Ext.MessageBox是异步的，它的调用并不会停止浏览器中代码的执行，如果希望在信息提示框出现并且用户做出反馈后才能调用程序，就需要吧相应程序组成一个函数，并且将该函数作为回调函数提供给Ext.MessageBox，再用户做出反馈后该回调函数将被调用，这样就可以达到控制程序执行的目的了。
Ext.onReady(function(){
alert('我会停止程序的执行。');
Ext.Msg.alert('提示','我不会停止程序的执行。');
})
/**
**执行代码会看到标准alert显示，而ExtJs版的alert并没有同事显示出来，说明程序的执行在显示标准alert之后被阻塞了，导致接下来的代码并没有执行
**/
Ext.onReady(function(){
Ext.Msg.alert('提示','我不会停止程序的执行。');
alert('我会停止程序的执行。');
})
/**
**执行代码会看到标准的alert与ExtJs的alert同时出现，说明ExtJs的alert是异步执行的，他不会阻塞程序代码的继续执行，
**这是他与标准alert最大的区别，会对编写代码的方式产生一定的影响
**/
Ext.MessageBox.alert()
一个只读信息提示框，用来代替js标准的alert()方法，有一个确定按钮，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括右上角的退出按钮），所单击按钮的id将被作为唯一的参数传递到回调函数中
调用格式：
alert(String title, String msg ,[Function fn],[Object scope])
参数说明：
title: 提示框标题;
msg: 显示的信息内容;
[Function fn]: (可选) 回调函数;
[Object scope]: (可选) 回调函数的作用域;
示例：
Ext.Message.alert('提示','请单击我，确认',callBack);
function callBack(id){
alert('单击的按钮ID是：'+id);
}
Ext.MessageBox.confirm()
显示一个确认信息框，用来代替JS标准的confirm()方法，具有两个按钮"是"和"否"，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括右上角的退出按钮），所单击按钮的id将被作为唯一的参数传递到回调函数中。
Ext.MessageBox.confirm的使用方法，与alert类似该确认对话框也是异步执行，不会造成代码阻塞。
调用格式：
confirm(String title, String msg ,[Function fn],[Object scope])
参数说明：
title: 提示框标题;
msg: 显示的信息内容;
[Function fn]: (可选) 回调函数;
[Object scope]: (可选) 回调函数的作用域;
示例：
Ext.Message.confirm('提示','请单击我，确认',callBack);
function callBack(id){
alert('单击的按钮ID是：'+id);
}
Ext.MessageBox.prompt()
显示一个获取用户输入信息的提示框，用来代替JS标准的prompt()方法，具有两个按钮"确认"和"取消"，并提供文本输入框接受用户的输入，如果为其提供一个回调函数，则该函数将在单击按钮后被调用（不包括右上角的退出按钮），所单击按钮的id将被作为唯一的参数传递到回调函数中。
调用格式：
prompt(String title, String msg ,[Function fn],[Object scope],[Boolean/Number multiline])
参数说明：
title: 提示框标题;
msg: 显示的信息内容;
[Function fn]: (可选) 回调函数;
[Object scope]: (可选) 回调函数的作用域;
[Boolean/Number multiline]: 设置false将显示一个单行文本域，设置为true将以默认高度显示一个多行文本区。或者以像素为单位直接设置文本域的高度。默认flase
示例：
Ext.Message.prompt('提示','请输入一些内容看看',callBack,this,true,"我是默认值");
function callBack(id,msg){
alert('单击的按钮ID是：'+id+'/n'+'输入的内容是：'+msg);
}
Ext.MessageBox.wait()
显示一个自动滚动的进度条提示框，他经常被用在一个耗时的交互操作当中，他不能定义一个时间间隔自动关闭，程序猿有责任在交互操作完成之后去关闭它
调用格式：
wait(String msg ,[String title], [Object config])
参数说明：
msg: 显示的信息内容;
title: 提示框标题,为可选参数;
[Object config]:用户配置进度条的配置对象,为可选参数;
示例：
Ext.Message.wait('请等待，操作需要很长时间！','提示',{
text:"进度条上的文字"
});
Ext.MessageBox.show()
基于配置来显示新的信息提示框或重置一个已存在的信息提示框，前面介绍的3个提示框内部调用的都是这个方法，尽管那些调用的简单快捷，但是他们并不支持所有的配置项，要简历更加个性化、功能更强大的提示框还需要从掌握Ext.MessageBox.show方法做起
Ext.MessageBox.show方法支持的配置项非常丰富，不但可以配置提示标题、提示信息、回调函数等常见的部分，他还提供了配置按钮文字及提示图片图标的方法，给了我们控制信息提示框的各种可能性，下边将分别给出这些配置项，和这些配置项共分为3个列表
Ext.MessageBox 常用配置项表
| 配置项 | 类型 | 说明 |
| title | String | 提示框的标题 |
| msg | String | 显示的信息内容 |
| width | Number | 对话框的宽度，单位px |
| maxWidth | Number | 对话框的最大宽度，默认600px |
| minWidth | Number | 对话框的最小宽度，默认100px |
| 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 | 按钮组，可选值见buttons表，默认为false，不显示任何按钮 |
| progress | Boolean | true则显示一个进度条，默认为false，该进度条需要由程序控制滚动 |
| progressText | String | 进度条上显示的文字 |
| proxyDrag | Boolean | true则显示一个高亮的拖动代理，默认为false |
| wait | Boolean | true则显示一个自动滚动的进度条，默认为false |
| waitConfig | Object | 等待进度条的配置对象，再wait为true时有效 |
| prompt | Boolean | true则显示一个单行文本域，默认为false |
| value | String | 如果prompt设置为true，则value值将显示在文本域中 |
| multiline | Boolean | 如果prompt设置为true，则multiline为true显示多行文本区，false显示单行文本域 |
| defaultTxetHeight | Number | 多行文本区的默认高度，默认值为75px |
| icon | String | 一个样式文件，他为对话框提供一个背景图，详细见icon表 |
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.INFO | 信息图标 | 气泡 I |
| Ext.Msg.OUESTION | 问题图标 | 气泡 ？ |
| Ext.Msg.WARNING | 警告图标 | 三角 ！ |
Ext.MessageBox.show({
title:'提示',
msg:'我有三个按钮，和一个多行文本区',
modal:true,
prompt:true,
value:'请输入',
fn:callBack,
buttons:Ext.Msg.YESNOCANCEL,
icon:Ext.Msg.QUESTION
})
function callBack(id,msg){
alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg);
}
改变默认的按钮文字
//这种方法会覆盖所有的提示文字，会对设置后所有的信息提示框上的按钮文字产生影响，如果要再次改变按钮文字就需要多次设置
//OK
Ext.MessageBox.msgButtons[0].setText(''按钮ok);
//YES
Ext.MessageBox.msgButtons[1].setText('按钮yes');
//NO
Ext.MessageBox.msgButtons[2].setText('按钮no');
//CANCEL
Ext.MessageBox.msgButtons[3].setText('按钮cancel');
动态更新提示框内容
var msgBox = Ext.MessageBox.show({
title:"提示",
msgL"动态更新的信息文字",
modal:true,
buttons:Ext.Msg.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);
更新进度条及提示信息示例
var msgBox = Ext.MessageBox.show({
title:"提示",
msg:'动态更新的进度条和信息文字"，
modal:true,
width:300,
progress:true
})
var count = 0; //滚动条被刷新的次数
var percentage = 0; //进度百分比
var progressText = ""; //进度条信息
var task = {
run : function(){
count++;
//计算进度
precentage = count/10;
//生产进度条文字
progressText = "当前完成度："+percentage*100+"%";
//更新信息提示对话框
msgBox.updateProgress(percentage,progressText,
'当前时间：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A');
)
//刷新10次后关闭信息提示对话框
if(count > 10){
Ext.TaskManager.stop(task);
msgBox.hide();
}
},
interval:100
}
Ext.TaskManager.start(task);
