(八)窗口及对话框

(1)窗口基本应用
ExtJS 中窗口是由Ext.Window 类定义，该类继承自Panel，因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。看下面的代码：
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);
});
<input type="button" id="btn" value="新窗口">
(2) 窗口分组
窗口是分组进行管理的，可以对一组窗口进行操作，默认情况下的窗口都在默认的组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.onReady(function(){
 mygroup=new Ext.WindowGroup();
 Ext.get("btn").on("click",newWin);
 Ext.get("btnToBack").on("click",toBack);
 Ext.get("btnHide").on("click",hideAll);
});
<input id="btn" type="button" name="add" value="新窗口" />
<input id="btnToBack" type="button" name="add" value="放到后台" />
<input id="btnHide" type="button" name="add" value="隐藏所有" />
执行上面的代码，先点击几次“新窗口”按钮，可以在页面中显示几个容器，然后拖动这些窗口，让他们在屏幕中不同的位置。然后点“放到后台”按钮，可以实现把最前面的窗口移动该组窗口的最后面去，点击“隐藏所有”按钮，可以隐藏当前打开的所有窗口。
(3) 对话框
由于传统使用alert、confirm 等方法产生的对话框非常古板，不好看。因此，ExtJS 提供了一套非常漂亮的对话框，可以使用这些对话框代替传统的alert、confirm 等，实现华丽的应用程序界面。
Ext 的对话框都封装在Ext.MessageBox 类，该类还有一个简写形式即Ext.Msg，可以直接通过Ext.MessageBox 或Ext.Msg 来直接调用相应的对话框方法来显示Ext 对话框。看下面的代码：
Ext.onReady(function(){
 Ext.get("btnAlert").on("click",function(){
  Ext.MessageBox.alert("请注意","这是ExtJS的提示框");
 });
});
<input id="btnAlert" type="button" name="add" value="alert" />
除了alert 以外，Ext 还包含confirm、prompt、progress、wait 等对话框，另外我们可以根据需要显示自下定义的对话框。普通对话框一般包括四个参数，比如confirm 的方法签名为confirm ( String title, String msg, [Function fn], [Object scope] ) ，参数title 表示对话框的标题，参数msg 表示对话框中的提示信息，这两个参数是必须的；可选的参数fn 表示当关闭对话框后执行的回调函数，参数scope 表示回调函数的执行作用域。回调函数可以包含两个参数，即button 与text,button 表示点击的按钮，text 表示对话框中有活动输入选项时输入的文本内容。我们可以在回调函数中通过button 参数来判断用户作了什么选择，可以通过text 来读取在对话框中输入的内容。看下面的例子：
Ext.onReady(function(){
 Ext.get("btn").on("click",function(){
  Ext.MessageBox.confirm("请确认","真的要删除指定的内容吗",function(button,text){
   alert(button);
   alert(text);
  });
 });
});
<input id="btn" type="button" name="add" value="delete" />
因此，在实际的应用中，上面的代码可以改成如下的内容：
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("你放弃了录入!");
  });
 });
});
<input id="btn" type="button" name="add" value="愿望" />
在实际应用中，可以直接使用MessageBox 的show 方法来显示自定义的对话框，如下面的代码：
function save(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: save,
   icon: Ext.MessageBox.QUESTION});
 });
});
<input id="btn" type="button" name="add" value="修改" />