三、ExtJS之對話方塊控制項

Extjs 在實現訊息框的時候，完全擯棄了傳統的風格，不再彈出新的對話方塊，而是在當前頁面跳出一個層，並將原頁面完整覆蓋。原來，只是一種類比。在 Ext 中，定義了一個類MessageBox，該類還有一個更精簡的名字Msg，所有訊息框都定義在該類中。

建立dialogs.js檔案。

提示框（Alert）

提示框的文法：Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );

參數定義如下：

title：標題 msg：提示內容 fn：提示框關閉後自動調用的回呼函數 scope：範圍，用於指定this指向哪裡，一般不用管他，特殊情況下有用
其實，通常情況下，我們用得更多的是title和msg兩個參數

extjsAlert1=function(){Ext.MessageBox.alert("提示框","這是一個提示框");}extjsAlert2=function(){Ext.MessageBox.alert("提示框","這是一個提示框",function(){alert("提示框關閉了");});}

記住函數名不要使用和DOM模型相同的名字，他們犯沖。

輸入框（promt）

輸入框用來提示輸入字串，相當於window.prompt()方法。

文法：Ext.MessageBox.prompt(String title,String msg, Function fn, Object scope, Boolean/Numbermultiline )

從定義中可以看到，前四個參數和提示框一樣，最後多了一個參數，如果為true 或為數字，將允許輸入多行或者指定預設高度（像素）。

extjsPromt1=function(){Ext.MessageBox.prompt("輸入框","請輸入您的姓名：",function(btn,txt){Ext.MessageBox.alert("結果","您點擊了" + btn + "按鈕，
輸入內容為：" + txt);});}extjsPromt2=function(){Ext.MessageBox.prompt("輸入框","請輸入您的姓名：",function(btn,txt){Ext.MessageBox.alert("結果","您點擊了" + btn + "按鈕，
輸入內容為：" + txt);},this,100);}

單行輸入

多行輸入

注意回呼函數的參數，第一個為點擊的按鈕的名字，如果點擊確定，為“ok”，如果點擊取消，為“cancel”，第二個參數就是使用者輸入的文本。

確認框（confirm）

確認框提示使用者作出選擇，文法如下：Ext.MessageBox.confirm ( String title, String msg, Function fn, Object scope )參數同上

extjsConfirm=function(){Ext.MessageBox.confirm("確認","請點擊下面的按鈕做出選擇",function(btn){Ext.MessageBox.alert("您的選擇是：" + btn);});}

可以通過回呼函數的參數btn採取相應的行動。

自訂訊息框（show）

show()方法的文法如下：Ext.MessageBox.show ( Object config )文法是不是顯得更簡單？不要小瞧了他，config這個參數可謂包羅永珍，使用json格式可以傳輸很多資訊到方法中去。

config中常見屬性如下：

title：訊息框標題列 msg：訊息內容 width：訊息框的寬度 multiline：是否顯示多行文本 closable：是否顯示關閉按鈕 buttons：按鈕 icon：表徵圖 fn：回呼函數

在上面的例子中，不熟悉的有buttons 和icon，這些選項在Ext.MessageBox 中已有定義。

buttons（按鈕）的取值如下：

OK：只有“確定”按鈕 CANCEL：只有“取消”按鈕 OKCANCEL：有“確定”和“取消”按鈕 YESNO：有“是”和“否”按鈕 YESNOCANCEL：有“是”、“否”和“取消”按鈕

icons（表徵圖）取值如下：

INFO：資訊表徵圖 WARNING：警告圖示 QUESTION：詢問表徵圖 ERROR：錯誤表徵圖

extjsShow=function(){var config={title: "自訂對話方塊",msg: "這是一個自訂對話方塊，想怎麼搞就怎麼搞",width: 400,multiline: true,closable: false,buttons: Ext.MessageBox.YESNOCANCEL,icon: Ext.MessageBox.QUESTION,fn: function(btn, txt){Ext.MessageBox.alert("結果", "您點擊了‘yes’按鈕
輸入的值是："+ txt);}};Ext.MessageBox.show(config);}

等待對話方塊（wait）

wait( String msg, String title, Object config)

顯示一個帶有不斷自動更新的進度條的訊息框。這個可以被用在一個長時間啟動並執行進程中防止使用者互動。需要在進程完成的時候關閉訊息框。

第三個參數表示配置選項，在本例中設定了internal選項為100，表示每100ms進度條前進一次。

extjsWait1=function(){Ext.MessageBox.wait('任務進行中中，請稍候。。。','等待',{internal:100});setTimeout(function(){Ext.MessageBox.hide();Ext.MessageBox.alert('結束','任務已完成');},6000);}

進度條對話方塊（progress）

進度條對話方塊也是一個自訂訊息框，配置config 時添時progress=true 即可，同時還可以設定其他相關資訊，如進度提示等。Extjs 為我們提供的只是一個對話方塊而已，進度條的滾動還得通過代碼實現。下面是進度條的代碼示範：

extjsProgress=function(){Ext.MessageBox.show({title:'請等待',msg:'正在載入...',progressText:'正在初始化...',width:300,progress:true,//此屬性證明這是一個進度條closable:false});var f=function(v){return function(){if(v==12){Ext.MessageBox.hide();Ext.MessageBox.alert('完成','所有項目載入完畢！');}else{var i = v/11;Ext.MessageBox.updateProgress(i,Math.round(100*i)+'%已完成');}};}for(var i=1;i<13;i++){setTimeout(f(i),i*500);}}

在上面的代碼中，progressText 屬性是進度條滾動之前最初的文本，滾動進程由updateProgress(Number value, String progressText)方法來定義，參數value是從0~1之間的小數，表示進度百分比；progressText 則表示進度條滾動過程中的文本提示資訊，如Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% 已完成');。

頁面html代碼

對話方塊<script type="text/javaScript" src="script/adapter/ext/ext-base.js"></script><script type="text/javaScript" src="script/ext-all.js"></script><script type="text/javascript" src="script/locale/ext-lang-zh_CN.js"></script><script type="text/javascript" src="js/dialogs.js"></script>