第五章、窗口及对话框
第五章、窗口及對(duì)話框
5 .1? 、窗口基本應(yīng)用
ExtJS 中窗口是由 Ext.Window 類定義，該類繼承自 Panel ，因此窗口其實(shí)是一種特殊 的
面板 Panel 。窗口包含了浮動(dòng)、可拖動(dòng)、可關(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)容：
<input id="btn" type="button" name="add" value=" 新窗口 " />
執(zhí)行上面的代碼，當(dāng)點(diǎn)擊按鈕 “ 新窗口 ” 的時(shí)候，會(huì)在頁面中顯示一個(gè)窗口，窗口標(biāo)題 為
“ 窗口 x ” ，窗口可以關(guān)閉，可以最大化，點(diǎn)擊最大化按鈕會(huì)最大化窗口，最大化的窗口可 以
還原，如圖 xxx 所示。
?
5.2、窗口分組
窗 口是分組進(jìn)行管理的，可以對(duì)一組窗口進(jìn)行操作，默認(rèn)情況下的窗口都在默認(rèn)的組
Ext.WindowMgr 中。窗口分組由類 Ext.WindowGroup 定義，該類包括 bringToFront 、 getAct ive 、
hideAll 、 sendToBack 等方法用來對(duì)分組中的窗口進(jìn)行操作。
看下面的代碼：
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 代碼
<input id="btn" type="button" name="add" value=" 新窗口 " />
<input id="btnToBack" type="button" name="add" value=" 放到后臺(tái) " />
<input id="btnHide" type="button" name="add" value=" 隱藏所有 " />
執(zhí)行上面的代碼，先點(diǎn)擊幾次 “ 新窗口 ” 按鈕，可以在頁面中顯示幾個(gè)容器，然后拖動(dòng) 這
些窗口，讓他們?cè)谄聊恢胁煌奈恢谩Ｈ缓簏c(diǎn) “ 放到后臺(tái) ” 按鈕，可以實(shí)現(xiàn)把最前面的窗口 移
動(dòng)該組窗口的最后面去，點(diǎn)擊 “ 隱藏所有 ” 按鈕，可以隱藏當(dāng)前打開的所有窗口。如下圖所 示 ：
?
5.3? 、對(duì)話框
由于傳 統(tǒng)使用 alert 、 confirm 等方法產(chǎn)生的對(duì)話框非常古板，不好看。因此， ExtJS 提 供
了一套非常漂亮的對(duì)話框，可以使用這些對(duì)話框代替?zhèn)鹘y(tǒng)的 alert 、 confirm 等，實(shí)現(xiàn)華麗的
應(yīng)用程序界面。
Ext 的對(duì)話框都封裝在 Ext.MessageBox 類，該類還有一個(gè)簡寫形式即 Ext.Msg ，可以 直
接通過 Ext.MessageBox 或 Ext.Msg 來直接調(diào)用相應(yīng)的對(duì)話框方法來顯示 Ext 對(duì)話框。看下
面的代碼：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.alert(" 請(qǐng)注意 "," 這是 ExtJS 的提示框 ");
});
});
Html 頁面中的內(nèi)容：
<input id="btnAlert" type="button" value="alert 框 " />
執(zhí)行程序，點(diǎn)擊上面的 “ alert 框 ” 按鈕，將會(huì)在頁面上顯示如下圖所示的對(duì)話框。
除了 alert 以外， Ext 還包含 confirm 、 prompt 、 progress 、 wait 等對(duì)話框，另外我們可 以
根據(jù)需要顯示自下定義的對(duì) 話框。普通對(duì)話框一般包括四個(gè)參數(shù)，比如 confirm 的方法簽
名為 confirm ( String title, String msg, [Function fn], [Object scope] ) ，參數(shù) title 表示對(duì)話框 的
標(biāo)題，參數(shù) msg 表示對(duì)話框中的提示信息，這兩個(gè)參數(shù)是必須的；可選的參數(shù) fn 表示當(dāng)關(guān)
閉對(duì)話框后執(zhí)行的回調(diào)函數(shù)，參數(shù) scope 表示回調(diào)函數(shù)的執(zhí)行作用 域。回調(diào)函數(shù)可以包含 兩
個(gè)參數(shù)，即 button 與 text,button 表示點(diǎn)擊的按鈕， text 表示對(duì)話框中有活動(dòng)輸 入選項(xiàng)時(shí)輸
入的文本內(nèi)容。我們可以在回調(diào)函數(shù)中通過 button 參數(shù)來判斷用戶作了什么什么選擇，可
以通過 text 來讀取在對(duì)話框中輸入的內(nèi)容。看下面的 例子： ]
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.confirm(" 請(qǐng)確認(rèn) "," 是否真的要?jiǎng)h除指定的內(nèi)容 ",function(button,text){
alert(button);
alert(text);
});
});
});
Html 內(nèi)容：
<input id=" 對(duì)話框 " type="button" value="btn" />
點(diǎn)擊對(duì)話框按鈕將會(huì)出現(xiàn)下面的對(duì)話框，然后選擇 yes 或 no 則會(huì)用傳統(tǒng)的提示框輸出
回調(diào)函數(shù)中 button 及 text 參數(shù)的內(nèi)容。
因此，在實(shí)際的應(yīng)用中，上面的代碼可以改成如下的內(nèi)容：
Ext.onReady(function(){
Ext.get("btnAlert").on("click",function(){
Ext.MessageBox.confirm(" 請(qǐng)確認(rèn) "," 是否真的要?jiǎng)h除指定的內(nèi)容 ",function(button,text){
if(button=="yes"){
// 執(zhí)行刪除操作
alert(" 成功刪除 ");
}
});
});
});
這樣當(dāng)用戶點(diǎn)擊對(duì)話框中的 yes 按鈕時(shí)，就會(huì)執(zhí)行相應(yīng)的操作，而選擇 no 則忽略操作 。
下面再看看 prompt 框，我們看下面的代碼：
Ext.onReady(function(){
Ext.get("btn").on("click",function(){
Ext.MessageBox.prompt(" 輸入提示框 "," 請(qǐng)輸入你的新年愿望 :",function(button,text){
if(button=="ok"){
alert(" 你的新年愿望是 :"+text);
}
else alert(" 你放棄了錄入 !");
});
});
});
Html 頁面：
<input id="btn" type="button" value=" 對(duì)話框 " />
點(diǎn)擊上面的 “ 對(duì)話框 ” 按鈕可以顯示如下圖所示的內(nèi)容，如果點(diǎn)擊 OK 按鈕則會(huì)輸入你 輸
入的文本內(nèi)容，選擇 cancel 按鈕則會(huì)提示放棄了錄入，如下圖所示：
在實(shí)際應(yīng)用中，可以直接使用 MessageBox 的 show 方法來顯示自定義的對(duì)話框，如下
面的代碼：
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});
});
});
點(diǎn)擊 “ 對(duì)話框 ” 按鈕可顯示一個(gè)自定義的保存數(shù)據(jù)對(duì)話框，對(duì)話框中包含 yes 、 no 、 canc el
三個(gè)按鈕，可以在回調(diào)函數(shù) save 中根據(jù)點(diǎn)擊的按鈕執(zhí)行相應(yīng)的操作，如圖 xx 所示。
轉(zhuǎn)載于:https://www.cnblogs.com/liu2008hz/archive/2010/10/27/1862665.html
總結(jié)
以上是生活随笔為你收集整理的第五章、窗口及对话框的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
