EXT視窗Window及對話方塊MessageBox_extjs

看下面的代碼：

複製代碼 代碼如下:

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”，視窗可以關閉，可以最大化，點擊最大化按鈕會已最大化的視窗，最大化的視窗可以還原，如圖xxx所示。

視窗分組
　　視窗是分組進行管理的，可以對一組視窗進行操作，預設情況下的視窗都在預設的組 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提供了一套非常漂亮的對話方塊，可以使用這些對話方塊代替傳統的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的提示框");
}
);
}
);

　　Html頁面中的內容：
　　執行程式，點擊上面的“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);
}
);
}
);
}
);

　　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按鈕則會提示放棄了錄入，如下圖所示：
 
在實際應用中，可以直接使用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
});
}
);
}
);

　　點擊“對話方塊”按鈕可顯示一個自訂的儲存資料對話方塊，對話方塊中包含yes、no、cancel三個按鈕，可以在回呼函數save中根據點擊的按鈕執行相應的操作，如圖xx所示。