窗口無論是在基本的js中還是在Ext這種js框架中都是比較常見的，而且現(xiàn)在多數(shù)js框架也在視圖打造唯美的窗口，當(dāng)然，Ext就是其中一個(gè)。Ext的窗口時(shí)很漂亮的，而且類型眾多，今天我們就從基礎(chǔ)做起逐漸來了解Ext的窗口。

注意：對(duì)于Ext的目錄及其文件存放結(jié)構(gòu)在此就不再過多贅余。

基本的Ext對(duì)話框

首先用Ext的話肯定要引入其類庫及其樣式文件，注意對(duì)于ext-base.js和ext-all.js的引入順序一定不能夠顛倒。

<link href="ext/resources/css/ext-all.css" mce_href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" /> <mce:script src="ext/adapter/ext/ext-base.js" mce_src="ext/adapter/ext/ext-base.js" type="text/javascript"></mce:script> <mce:script src="ext/ext-all.js" mce_src="ext/ext-all.js" type="text/javascript"></mce:script>

接下來當(dāng)然就是寫我們自己的js代碼，注意Ext和jQuery一樣都會(huì)在load事件之前加載代碼，在Ext中對(duì)應(yīng)的就是onReady事件。

Ext.onReady(function(){ Ext.get("btnAlert").on("click",function(){ Ext.MessageBox.alert("系統(tǒng)信息","你好這是Ext的Alert對(duì)話框！!"); } ); );

首頁我們?cè)陧撁嬗幸粋€(gè)按鈕，其id為btnAlert，然后在onReady中我們給按鈕添加click事件，在按鈕的單擊事件中我們通過Ext.MessageBox.alert()來彈出對(duì)話框。

效果如圖：

確認(rèn)對(duì)話框

我們都知道在js中有時(shí)會(huì)用到confirm，當(dāng)然在ext中也是有的。

Ext.get("btnConfirm").on("click",function(){ Ext.MessageBox.confirm("System Info","確認(rèn)刪除嗎？",function(btn,txt){ if(btn=="yes"){ Ext.MessageBox.alert("系統(tǒng)提示","刪除成功！"); }else if(btn=="no"){ Ext.MessageBox.alert("系統(tǒng)提示","你放棄了刪除操作！") } } ); } );

用法和js沒有區(qū)別，效果如圖：

輸入對(duì)話框

其實(shí)看了上面兩個(gè)對(duì)話框，你應(yīng)該就知道下面肯定要說到Prompt

Ext.get("btnPrompt").on("click",function(){ Ext.MessageBox.prompt("系統(tǒng)信息","請(qǐng)輸入您的姓名：",function(btn,txt){ if(btn=="ok"){ alert("您的輸入為："+txt); }else{ alert("請(qǐng)重新輸入！"); } } ); } );

運(yùn)行效果：

擴(kuò)展：多行輸入對(duì)話框

在js中我們應(yīng)該是沒有多行的prompt，但是在Ext中卻用自定義對(duì)話框（下面會(huì)說到）給我們模擬出來了。

Ext.get("btnMultiPrompt").on("click",function(){ Ext.MessageBox.show({ title:'系統(tǒng)信息', msg:'請(qǐng)輸入您的個(gè)人簡(jiǎn)歷', buttons:Ext.MessageBox.OKCANCEL, multiline:true, width:300, fn:function(btn,txt){ if(btn=="ok"){ Ext.MessageBox.alert("系統(tǒng)信息","您輸入的信息為："+txt); }else{ Ext.MessageBox.alert("系統(tǒng)信息","您做了取消操作"); } } }); } );

效果：

自定義對(duì)話框

其實(shí)你會(huì)發(fā)現(xiàn)上面幾種對(duì)話框有時(shí)候并不能滿足我們的要求，我們經(jīng)常用word都知道如果我們新建了或修改了信息之后而沒有保存，現(xiàn)在要關(guān)閉word的時(shí)候就會(huì)給出提示，在這個(gè)提示框中我們不是只有兩種選擇而是有三種，您可以選擇保存、不保存或者取消關(guān)閉操作。下面我們也來定義一個(gè)這樣的對(duì)話框。

function SaveInfo(btn){ if(btn=="yes"){ Ext.MessageBox.alert("系統(tǒng)信息","保存成功!"); }else if(btn=="no"){ //other operate }else{ //other operate } } Ext.get("btnMsgShow").on("click",function(){ Ext.Msg.show({ title:'系統(tǒng)提示', msg: '你想要保存修改信息嗎？', buttons: Ext.Msg.YESNOCANCEL, fn: SaveInfo, icon: Ext.MessageBox.QUESTION }); } );

我們第一個(gè)行數(shù)用于為自定義對(duì)話框服務(wù)，在對(duì)話框中我們首先聲明標(biāo)題信息，然后定義提示信息，接著定義按鈕類型、處理函數(shù)、圖標(biāo)等信息，當(dāng)然著所有的一切都是json格式。

效果如圖

如果點(diǎn)擊yes的話就會(huì)按照上面定義的函數(shù)提示保存成功。

當(dāng)然上面的buttons和icon還有其他形式，具體見ExtJs API中MessageBox

進(jìn)度條對(duì)話框

Ext中給我們準(zhǔn)備了進(jìn)度條，下面我們看一下：

Ext.get("btnProgress").on("click",function(){ Ext.Msg.show({ title:'系統(tǒng)信息', msg:'正在處理，請(qǐng)等待...', width:300, progress:true, progressText:'progress...', closable:false, animEl:'btnProgress' }); var myFun=function(i){ return function(){ if(i==11){ Ext.MessageBox.hide();//隱藏窗口 }else{ Ext.MessageBox.updateProgress(i/10,100*(i/10)+"%"); } } } for(var i=1;i<=11;++i){ setTimeout(myFun(i),i*500); } } );

對(duì)于上面的代碼，注意其進(jìn)度處理函數(shù)是在click事件內(nèi)部，通過調(diào)用Ext.MessageBox.updateProgress()函數(shù)，Ext自己就會(huì)知道是更新當(dāng)前的進(jìn)度對(duì)話框的進(jìn)度。

效果如圖：

等待處理進(jìn)度對(duì)話框

進(jìn)度條是在已知處理時(shí)間的情況下使用，如果說你要處理一個(gè)事情，但是不知道處理時(shí)間這是我們就會(huì)用到等待進(jìn)度，也就是這個(gè)進(jìn)度重復(fù)行進(jìn)就像啟動(dòng)windows xp時(shí)那個(gè)進(jìn)度條一樣。

Ext.get("btnWaitProgress").on("click",function(){ Ext.Msg.show({ title:'系統(tǒng)信息', msg:'正在處理，請(qǐng)等待...', width:300, wait:true, progressText:'progress...', waitConfig:{interval:200}, animEl:'btnWaitProgress' }); setTimeout(function(){ Ext.MessageBox.hide(); }, 5000 ); } );

效果如圖：

Ext窗口

到這里位置，我們才說道Ext中的窗口，上面我們主要談了一下Ext中的各種對(duì)話框，窗口還沒有說（關(guān)于窗口和對(duì)話框的區(qū)別在此就不再過多解釋了）。經(jīng)常地在很多論壇中我們能夠看到注冊(cè)及登錄頁面不再像以前一樣單獨(dú)做一個(gè)頁面而是以一個(gè)窗口的形式展現(xiàn)在我們面前供我們數(shù)據(jù)信息，之后可以提交。

var win; Ext.get("btnWindow").on("click",function(){ if(!win){//如果不存在win對(duì)象擇創(chuàng)建 win=new Ext.Window({ title:'Ext窗口', width:400, height:300, layout:'fit',//設(shè)置窗口內(nèi)部布局 closeAction:'hide', plain:true,//true則主體背景透明，false則和主體背景有些差別 collapsible:true,//是否可收縮 modal:true,//是否為模式窗體 items:new Ext.TabPanel({//窗體中中是一個(gè)一個(gè)TabPanel autoTabs:true, activeTab:0, deferredRender:false, border:false, items:[ { title:'Tab1', html:'Tab1的內(nèi)容'//內(nèi)部顯示內(nèi)容 }, { title:'Tab2', html:'Tab2的內(nèi)容' } ] }), buttons:[ { text:'提交', disabled:true//暫時(shí)設(shè)為不可用 }, { text:'關(guān)閉', handler:function(){//點(diǎn)擊時(shí)觸發(fā)的事件 win.hide(); } } ] }); } win.show();//顯示窗體 } );

對(duì)于上面的代碼基本上都有注釋，我也不再做解釋，對(duì)于TabPanel如果不理解沒有關(guān)系，后面會(huì)專門提到。

運(yùn)行效果：

注意上面的Ext.MessageBox也可以用Ext.Msg這個(gè)別名代替，其實(shí)上面我們已經(jīng)用了。

ExtJS之對(duì)話框及窗口篇