EXT窗口Window与对话框MessageBox教程
Ext.Window可创建可拖拽、最大化及还原的窗口，通过Ext.WindowGroup进行分组管理，提供bringToFront、sendToBack等丰富的层级控制方法。Ext.MessageBox封装了alert、confirm、prompt等美化风格的对话框，通过回调函数参数获取用户点击的按钮及输入内容，支持完全自定义按钮与图标样式。
先来看一段最简单的代码——点击按钮，弹出一个窗口。在 ExtJS 中，核心是使用 Ext.Window 组件。定义一个窗口对象，设置标题、宽高，并添加可最大化属性，然后调用 show() 方法即可。以下示例演示了每次点击按钮时，都会生成一个标题递增的新窗口，并且该窗口支持拖拽、关闭、最大化和还原操作。
var i=0;
function newWin(){
var win = new Ext.Window({
title:"窗口"+i++,
width:400,
height:300,
maximizable:true
});
win.show();
}
Ext.onReady(
function(){
Ext.get("btn").on("click",newWin);
}
);
页面中的 html 内容：
执行上述代码后，点击“新窗口”按钮，页面中会显示一个窗口，标题为“窗口x”，该窗口可以关闭和最大化。点击最大化按钮后窗口会全屏显示，并可以还原，如图所示。
窗口分组
窗口的管理基于分组机制。一组中的窗口可以统一进行操作，例如将当前最前面的窗口移至最后，或一次性隐藏所有窗口。默认情况下，所有窗口属于默认组 Ext.WindowMgr。如需自定义分组，可使用 Ext.WindowGroup 类，该类提供了 bringToFront、getActive、hideAll 和 sendToBack 等方法，方便控制组内窗口的顺序和可见性。
参考以下代码：
var i=0,mygroup;
function newWin(){
var win=new Ext.Window({
title:"窗口"+i++,
width:400,
height:300,
maximizable:true,
manager:mygroup
});
win.show();
}
function toBack(){
mygroup.sendToBack(mygroup.getActive());
}
function hideAll(){
mygroup.hideAll();
}
Ext.oReay(
function(){
mygroup=new Ext.WindowGroup();
Ext.get("btn").on("click",newWin);
Ext.get("btnToBack").on("click",toBack);
Ext.get("btnHide").on("click",hideAll);
}
);
页面中的 html 代码
执行上述代码后，先多次点击“新窗口”按钮，页面中会显示多个容器，可以拖动这些窗口至不同位置。接着点击“放到后台”按钮，可将最前面的窗口移至该组窗口的最后面；点击“隐藏所有”按钮，可隐藏当前打开的所有窗口。效果如下图所示：
对话框
传统的 alert、confirm 对话框在外观上与现代界面风格存在差异。ExtJS 提供了一套样式统一的对话框，封装在 Ext.MessageBox 类中。它的简写为 Ext.Msg，两种写法均可使用。以下是一个简单的 alert 对话框示例：
Ext.onReady(
function(){
Ext.get("btnAlert").on(
"click",
function(){
Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
}
);
}
);
Html 页面中的内容：
运行程序，点击“alert框”按钮，页面将显示如下图所示对话框。
除了 alert，ExtJS 还支持 confirm、prompt、progress、wait 等对话框，也可以使用 show 方法自定义。大部分对话框接受四个参数：标题 title、提示信息 msg（这两个为必填项）、回调函数 fn（可选，用户关闭对话框后执行）、作用域 scope（可选，指定回调函数中的 this 值）。回调函数会接收两个参数：button（用户点击的按钮）和 text（如果对话框包含输入框，则返回输入的内容）。通过这两个参数，可以判断用户的操作（确认或取消）或读取输入的文本。
参考以下 confirm 示例：
Ext.onReady(
function(){
Ext.get("btn").on(
"click",
function(){
Ext.MessageBox.confirm(
"请确认","是否真的要删除指定的内容",
function(button,text){
alert(button);
alert(text);
}
);
}
);
}
);
Html 内容：
点击对话框按钮将出现如下对话框，选择 yes 或 no 后，会通过传统提示框输出回调函数中 button 和 text 参数的内容。
在实际应用中，通常需要根据用户的选择执行不同逻辑。例如：
Ext.onReady(
function(){
Ext.get("btnAlert").on(
"click",
function(){
Ext.MessageBox.confirm(
"请确认",
"是否真的要删除指定的内容",
function(button,text){
if(button=="yes"){
//执行删除操作
alert("成功删除");
}
}
);
}
);
}
);
当用户点击对话框中的 yes 按钮时，会执行删除操作；选择 no 则忽略操作。
以下为 prompt 输入框的示例——让用户输入内容，并根据点击的按钮进行处理：
Ext.onReady(
function(){
Ext.get("btn").on(
"click",
function(){
Ext.MessageBox.prompt(
"输入提示框",
"请输入你的新年愿望:",
function(button,text){
if(button=="ok"){
alert("你的新年愿望是:"+text);
}
else
alert("你放弃了录入!");
}
);
}
);
}
);
Html 页面：
点击“对话框”按钮可显示如下图所示内容。若点击 OK 按钮，则弹出包含输入文本的提示框；若选择 cancel 按钮，则提示“你放弃了录入”。效果如下图所示：
如需更灵活的对话框——例如包含多个按钮、自定义图标或进度条——可以直接使用 Ext.Msg.show 方法。以下是一个“保存数据”的确认框，包含 Yes、No、Cancel 三个按钮，并使用问号图标：
function sa ve(button){
if(button=="yes"){
//执行数据保存操作
}
else if(button=="no"){
//不保存数据
}
else{
//取消当前操作
}
}
Ext.onReady(
function(){
Ext.get("btn").on(
"click",
function(){
Ext.Msg.show({
title:'保存数据',
msg: '你已经作了一些数据操作，是否要保存当前内容的修改？',
buttons: Ext.Msg.YESNOCANCEL,
fn: sa ve,
icon: Ext.MessageBox.QUESTION
});
}
);
}
);
点击“对话框”按钮可显示自定义的保存数据对话框，其中包含 yes、no、cancel 三个按钮。可以在回调函数 sa ve 中根据点击的按钮执行相应操作，如图 xx 所示。
