复制代码 代码如下:

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”的浮动窗口。该窗口支持关闭和最大化操作，点击最大化按钮可将窗口铺满屏幕，再次点击即可还原至原始大小，具体效果如下图所示。

ExtJS 窗口分组管理

窗口在 ExtJS 中是按组进行管理的。通过分组，可以统一操控一组窗口，例如将最前面的窗口移动到底层，或者一次性隐藏所有窗口。默认情况下，所有窗口归属于默认组 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 代码：
执行后，先多次点击“新窗口”按钮，页面中会显示多个窗口容器。你可以拖动这些窗口，将它们放置在屏幕的不同位置。随后点击“放到后台”按钮，可将最前面的窗口移至该组窗口的最底层；点击“隐藏所有”按钮，则能隐藏当前打开的全部窗口。效果如下图所示：

ExtJS 对话框组件应用

传统的 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 参数的内容。

在实际应用中，你通常需要根据用户的选择执行不同的逻辑，而不仅仅是显示一个 alert。例如：

复制代码 代码如下:

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 中根据点击的按钮执行相应的操作，效果如下图所示：