快捷導(dǎo)航

EXT窗口Window及對話框MessageBox

更新時間：2011年01月27日 13:32:36 作者：

ExtJS中窗口是由Ext.Window類定義，該類繼承自Panel，因此窗口其實是一種特殊的面板Panel。窗口包含了浮動、可拖動、可關(guān)閉、最大化、最小化等特性。

看下面的代碼：

 
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內(nèi)容：
　　執(zhí)行上面的代碼，當(dāng)點擊按鈕“新窗口”的時候，會在頁面中顯示一個窗口，窗口標(biāo)題為“窗口x”，窗口可以關(guān)閉，可以最大化，點擊最大化按鈕會最大化窗口，最大化的窗口可以還原，如圖xxx所示。

窗口分組
　　窗口是分組進(jìn)行管理的，可以對一組窗口進(jìn)行操作，默認(rèn)情況下的窗口都在默認(rèn)的組 Ext.WindowMgr中。窗口分組由類Ext.WindowGroup定義，該類包括bringToFront、getActive、 hideAll、sendToBack等方法用來對分組中的窗口進(jìn)行操作。
　　看下面的代碼：

復(fù)制代碼代碼如下:

 
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代碼
　　執(zhí)行上面的代碼，先點擊幾次“新窗口”按鈕，可以在頁面中顯示幾個容器，然后拖動這些窗口，讓他們在屏幕中不同的位置。然后點“放到后臺”按鈕，可以實現(xiàn)把最前面的窗口移動該組窗口的最后面去，點擊“隱藏所有”按鈕，可以隱藏當(dāng)前打開的所有窗口。如下圖所示：

對話框
　　由于傳統(tǒng)使用alert、confirm等方法產(chǎn)生的對話框非常古板，不好看。因此，ExtJS提供了一套非常漂亮的對話框，可以使用這些對話框代替?zhèn)鹘y(tǒng)的alert、confirm等，實現(xiàn)華麗的應(yīng)用程序界面。
Ext的對話框都封裝在Ext.MessageBox類，該類還有一個簡寫形式即Ext.Msg，可以直接通過Ext.MessageBox或Ext.Msg來直接調(diào)用相應(yīng)的對話框方法來顯示Ext對話框?？聪旅娴拇a：

復(fù)制代碼代碼如下:

 
Ext.onReady( 
function(){ 
Ext.get("btnAlert").on( 
"click", 
function(){ 
Ext.MessageBox.alert("請注意","這是ExtJS的提示框"); 
} 
); 
} 
); 

　　Html頁面中的內(nèi)容：
　　執(zhí)行程序，點擊上面的“alert框”按鈕，將會在頁面上顯示如下圖所示的對話框。

除了alert以外，Ext還包含confirm、prompt、progress、wait等對話框，另外我們可以根據(jù)需要顯示自下定義的對話框。普通對話框一般包括四個參數(shù)，比如confirm的方法簽名為confirm ( String title, String msg, [Function fn], [Object scope] ) ，參數(shù)title表示對話框的標(biāo)題，參數(shù)msg表示對話框中的提示信息，這兩個參數(shù)是必須的；可選的參數(shù)fn表示當(dāng)關(guān)閉對話框后執(zhí)行的回調(diào)函數(shù)，參數(shù) scope表示回調(diào)函數(shù)的執(zhí)行作用域?；卣{(diào)函數(shù)可以包含兩個參數(shù)，即button與text,button表示點擊的按鈕，text表示對話框中有活動輸入選項時輸入的文本內(nèi)容。我們可以在回調(diào)函數(shù)中通過button參數(shù)來判斷用戶作了什么什么選擇，可以通過text來讀取在對話框中輸入的內(nèi)容?？聪旅娴睦樱?

復(fù)制代碼代碼如下:

 
Ext.onReady( 
function(){ 
Ext.get("btn").on( 
"click", 
function(){ 
Ext.MessageBox.confirm( 
"請確認(rèn)","是否真的要刪除指定的內(nèi)容", 
function(button,text){ 
alert(button); 
alert(text); 
} 
); 
} 
); 
} 
); 

　　Html內(nèi)容：

　　點擊對話框按鈕將會出現(xiàn)下面的對話框，然后選擇yes或no則會用傳統(tǒng)的提示框輸出回調(diào)函數(shù)中button及text參數(shù)的內(nèi)容。

因此，在實際的應(yīng)用中，上面的代碼可以改成如下的內(nèi)容：

復(fù)制代碼代碼如下:

 
Ext.onReady( 
function(){ 
Ext.get("btnAlert").on( 
"click", 
function(){ 
Ext.MessageBox.confirm( 
"請確認(rèn)", 
"是否真的要刪除指定的內(nèi)容", 
function(button,text){ 
if(button=="yes"){ 
//執(zhí)行刪除操作 
alert("成功刪除"); 
} 
} 
); 
} 
); 
} 
); 

　　這樣當(dāng)用戶點擊對話框中的yes按鈕時，就會執(zhí)行相應(yīng)的操作，而選擇no則忽略操作。

　　下面再看看prompt框，我們看下面的代碼：

復(fù)制代碼代碼如下:

 
Ext.onReady( 
function(){ 
Ext.get("btn").on( 
"click", 
function(){ 
Ext.MessageBox.prompt( 
"輸入提示框", 
"請輸入你的新年愿望:", 
function(button,text){ 
if(button=="ok"){ 
alert("你的新年愿望是:"+text); 
} 
else 
alert("你放棄了錄入!"); 
} 
); 
} 
); 
} 
); 

　　Html頁面：
　　點擊上面的“對話框”按鈕可以顯示如下圖所示的內(nèi)容，如果點擊OK按鈕則會輸入你輸入的文本內(nèi)容，選擇cancel按鈕則會提示放棄了錄入，如下圖所示：

在實際應(yīng)用中，可以直接使用MessageBox的show方法來顯示自定義的對話框，如下面的代碼：

復(fù)制代碼代碼如下:

 
function save(button){ 
if(button=="yes"){ 
//執(zhí)行數(shù)據(jù)保存操作 
} 
else if(button=="no"){ 
//不保存數(shù)據(jù) 
} 
else{ 
//取消當(dāng)前操作 
} 
} 
Ext.onReady( 
function(){ 
Ext.get("btn").on( 
"click", 
function(){ 
Ext.Msg.show({ 
title:'保存數(shù)據(jù)', 
msg: '你已經(jīng)作了一些數(shù)據(jù)操作，是否要保存當(dāng)前內(nèi)容的修改？', 
buttons: Ext.Msg.YESNOCANCEL, 
fn: save, 
icon: Ext.MessageBox.QUESTION 
}); 
} 
); 
} 
); 