欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

EXT窗口Window及對(duì)話框MessageBox

 更新時(shí)間：2011年01月27日 13:32:36   作者：  
ExtJS中窗口是由Ext.Window類定義，該類繼承自Panel，因此窗口其實(shí)是一種特殊的面板Panel。窗口包含了浮動(dòng)、可拖動(dòng)、可關(guān)閉、最大化、最小化等特性。
看下面的代碼：
復(fù)制代碼 代碼如下:

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);
}
);

　　頁(yè)面中的html內(nèi)容：
　　執(zhí)行上面的代碼，當(dāng)點(diǎn)擊按鈕“新窗口”的時(shí)候，會(huì)在頁(yè)面中顯示一個(gè)窗口，窗口標(biāo)題為“窗口x”，窗口可以關(guān)閉，可以最大化，點(diǎn)擊最大化按鈕會(huì)最大化窗口，最大化的窗口可以還原，如圖xxx所示。

窗口分組
　　窗口是分組進(jìn)行管理的，可以對(duì)一組窗口進(jìn)行操作，默認(rèn)情況下的窗口都在默認(rèn)的組 Ext.WindowMgr中。窗口分組由類Ext.WindowGroup定義，該類包括bringToFront、getActive、 hideAll、sendToBack等方法用來(lái)對(duì)分組中的窗口進(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);
}
);

　　頁(yè)面中的html代碼
　　執(zhí)行上面的代碼，先點(diǎn)擊幾次“新窗口”按鈕，可以在頁(yè)面中顯示幾個(gè)容器，然后拖動(dòng)這些窗口，讓他們?cè)谄聊恢胁煌奈恢谩Ｈ缓簏c(diǎn)“放到后臺(tái)”按鈕，可以實(shí)現(xiàn)把最前面的窗口移動(dòng)該組窗口的最后面去，點(diǎn)擊“隱藏所有”按鈕，可以隱藏當(dāng)前打開(kāi)的所有窗口。如下圖所示：

對(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è)簡(jiǎn)寫形式即Ext.Msg，可以直接通過(guò)Ext.MessageBox或Ext.Msg來(lái)直接調(diào)用相應(yīng)的對(duì)話框方法來(lái)顯示Ext對(duì)話框?？聪旅娴拇a：
復(fù)制代碼 代碼如下:

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

　　Html頁(yè)面中的內(nèi)容：
　　執(zhí)行程序，點(diǎn)擊上面的“alert框”按鈕，將會(huì)在頁(yè)面上顯示如下圖所示的對(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ù)中通過(guò)button參數(shù)來(lái)判斷用戶作了什么什么選擇，可以通過(guò)text來(lái)讀取在對(duì)話框中輸入的內(nèi)容?？聪旅娴睦樱?
復(fù)制代碼 代碼如下:

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)容：

　　點(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)容：
復(fù)制代碼 代碼如下:

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框，我們看下面的代碼：
復(fù)制代碼 代碼如下:

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頁(yè)面：
　　點(diǎn)擊上面的“對(duì)話框”按鈕可以顯示如下圖所示的內(nèi)容，如果點(diǎn)擊OK按鈕則會(huì)輸入你輸入的文本內(nèi)容，選擇cancel按鈕則會(huì)提示放棄了錄入，如下圖所示：
 
在實(shí)際應(yīng)用中，可以直接使用MessageBox的show方法來(lái)顯示自定義的對(duì)話框，如下面的代碼：
復(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
});
}
);
}
);

　　點(diǎn)擊“對(duì)話框”按鈕可顯示一個(gè)自定義的保存數(shù)據(jù)對(duì)話框，對(duì)話框中包含yes、no、cancel三個(gè)按鈕，可以在回調(diào)函數(shù)save中根據(jù)點(diǎn)擊的按鈕執(zhí)行相應(yīng)的操作，如圖xx所示。

相關(guān)文章

最新評(píng)論