从外观上来讲，浏览器自带的alert、confirm、prompt等对话框并不好看，而且配置也不灵活。诸如按钮的添加、删除、以及修改按下按钮所触发的事件等操作都非常难以执行，而在EXT的msgbox里都能实现，而且外观相当漂亮，本节将详细介绍EXT中的弹出窗口。
Ext.MessageBox为我们提供了弹出提示框的简单方法，使用它提供的alert、confirm、prompt等对话框完全可以代替浏览器原生的alert、confirm、prompt邓对话框，除此之外，Ext.MessageBox还提供了诸如进度条等更多的功能
1、Ext.MessageBox.alert()的使用方法和效果图(图1所示)
view plaincopy to clipboardprint?
Ext.MessageBox.alert('标题','内容',function(btn){
alert('你刚刚点击了'+btn);
});
Ext.MessageBox.alert('标题','内容',function(btn){
alert('你刚刚点击了'+btn);
});
图1 alert效果图
2、Ext.MessageBox.confirm()的使用方法和效果图(如图2所示)
view plaincopy to clipboardprint?
Ext.MessageBox.confirm('选择框','你到底选择Yes还是No?',function(btn){
alert('您刚刚选择了'+btn);
});
Ext.MessageBox.confirm('选择框','你到底选择Yes还是No?',function(btn){
alert('您刚刚选择了'+btn);
});
图2 confirm效果图
3、Ext.MessageBox.prompt()的使用方法和效果图(如图3所示)
view plaincopy to clipboardprint?
Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){
alert('你刚刚点击了'+btn+", 刚刚输入了"+text);
});
Ext.MessageBox.prompt('输入框','随便输入一些东西',function(btn,text){
alert('你刚刚点击了'+btn+", 刚刚输入了"+text);
});
图3 prompt效果图
对话框的更多设置
1、可以输入多行的输入框
Ext.MessageBox.show({
title:'多行输入框',
msg:'可以输入多行:',
width:300,
buttons:Ext.MessageBox.OKCANCEL,
multiline:true,
fn:function(btn,text){
alert('你刚刚点击了 ',btn+",刚刚输入了 "+text);
}
});
相关属性设置：
buttons:表示对话框中的按钮，Ext.MessageBox已经为我们预设定好了按钮的位置。我们这里使用的是Ext.MessageBox.OKCANCEL,即显示OK和cancel两个按钮
Multilint：表示我们可以输入多行内容，设置为true之后便自动生成一个textarea.
fn:表示回调函数，它会在用户关闭对话框是接受或处理我们需要的结果。
2、自定义对话框按钮
我们可以使用Ext.Message.show()设置对话框中按钮的样式，如下面的代码所示
Ext.MessageBox.show({
title:'自定义对话框的按钮',
msg:'从三个按钮中选择一个',
buttons:Ext.MessageBox.YESNOCANCEL,
fn:function(btn){
alert('您刚刚点击了 '+btn);
}
});
相关属性设置：buttons参数设置了Ext.MessageBox.YESNOCANCEL,这样在弹出的对话框中可以看到三个按钮。YESNOCANCEL是定义在EXT中的一个变量，它的值是{yes:true,no:true,cancel:true}.
3、进度条
进度条经常用于需要用户等待某一操作完成的场景，当执行一些十分耗时的操作时，我们需要用它来提示用户耐心等待，Ext.MessageBox为我们提供了默认的进度条，只要将progress参数设置为true，对话框中就会出现进度条，如下面的代码所示：
Ext.MessageBox.show({
title:'请等待',
msg:'读取数据中……',
width:240,
progress:true,
closable:false
});
上面我们虽然已经得到了进度条，但是它的进度状态不会发生变化，我们需要调用Ext.MessageBox.updateProgree()函数让进度条状态发生变化，通常，我们会使用closable:false来隐藏对话框右上角的关闭按钮，从而禁止用户关掉进度条。
现在，我们为上面添加更新进度条的功能，我们使用timeout定时器对进度条进行修改，进度条的状态会随着时间而变化，10秒后整个进度条对话框将隐藏。关键代码如下：
上面我们虽然已经得到了进度条，但是它的进度状态不会发生变化，我们需要调用Ext.MessageBox.updateProgree()函数让进度条状态发生变化，通常，我们会使用closable:false来隐藏对话框右上角的关闭按钮，从而禁止用户关掉进度条。
现在，我们为上面添加更新进度条的功能，我们使用timeout定时器对进度条进行修改，进度条的状态会随着时间而变化，10秒后整个进度条对话框将隐藏。关键代码如下：
Ext.MessageBox.show({
title:'请等待',
msg:'读取数据中……',
width:240,
progress:true,
closable:false
});
var f=function(v){
return function(){
if(v==11){
Ext.MessageBox.hide();
}else{
Ext.MessageBox.updateProgress(v/10,'正在读取第 '+v+' 个，一共10个。');
}
};
};
for(var i=1;i<12;i++)
{
setTimeout(f(i),i*1000);
}
4、动画效果
我们可以为对话框设置弹出和关闭的动画效果，使用animEl参数指定一个HTML元素，对话框就会依据制定的HTML元素播放弹出和关闭的动画。我们修改前面的代码，加入animEl参数实现动画效果,如下面的代码所示：
Ext.MessageBox.show({
title:'自定义对话框的按钮',
msg:'从三个按钮中选择一个',
buttons:Ext.MessageBox.YESNOCANCEL,
fn:function(btn){
alert('您刚刚点击了 '+btn);
},
animEl:'dialog'
});
animEl参数的值是一个字符串，它与HTML中的一个元素的id相对应，例如<div id="dialog"></div>。依据这个元素的id，我们创建的对话框才知道根据哪个元素播放弹出和关闭的动画
Ext.Window的常用属性
窗口的相关属性介绍：
el:对应HTML的一个元素。
layout:对应窗口的布局样式（layout:fit表示布局会充满整个窗口）
closeAction：‘hide’是个常数，它用来控制用户单击右上角的关闭图标执行的操作。参数值'hide'表示关闭窗口执行的隐藏操作指令，之后我们还可以使用show（）函数来显示刚刚关闭的窗口。如果使用默认值'close'，会在关闭窗口是把窗口对象销毁，这样就不能使用show()函数来显示窗口了。
closeable：用户不能使用右上角的关闭按钮
draggable:用户是否可以随意拖动窗口的位置
Buttons ：用于设置显示在窗口底部的按钮
items：包含的其他的组件
窗口最大化和最小化：设置参数maximizable:true
防止窗口超出浏览器：设置窗口的移动范围constrain和constrainHeader,他们分别用来限制窗口的整体和窗口顶部不能超过浏览器的边界。
设置窗口中的按钮：通过buttons参数指定窗口下部的按钮。通过buttonAlign参数设置按钮的对齐方式。defaultbutton按钮用来设置用户默认选择。
窗口的其他配置属性
resizable：可以用来控制窗口是否可以通过拖动改变大小。
resizeableHandle：用来控制拖动的方式。
