標籤：extjs
Extjs 在實現訊息框的時候，完全擯棄了傳統的風格，不再彈出新的對話方塊，而是在當前頁面跳出一個層，並將原頁面完整覆蓋。原來，只是一種類比。在 Ext 中，定義了一個類MessageBox，該類還有一個更精簡的名字Msg，所有訊息框都定義在該類中。
建立dialogs.js檔案。
提示框的文法：Ext.MessageBox. alert ( String title, String msg, Function fn, Object scope );
參數定義如下：
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 + "按鈕，<br>輸入內容為：" + txt);});}extjsPromt2=function(){Ext.MessageBox.prompt("輸入框","請輸入您的姓名：",function(btn,txt){Ext.MessageBox.alert("結果","您點擊了" + btn + "按鈕，<br>輸入內容為：" + 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中常見屬性如下：
在上面的例子中，不熟悉的有buttons 和icon，這些選項在Ext.MessageBox 中已有定義。
buttons（按鈕）的取值如下：
icons（表徵圖）取值如下：
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’按鈕<br>輸入的值是："+ 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)+‘% 已完成‘);。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>對話方塊</title><link rel="stylesheet" type="text/css" href="script/resources/css/ext-all.css" /><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></head><body><center><br><hr><input type="button" value="簡單提示框" onclick="extjsAlert1()"><hr><input type="button" value="帶有回呼函數的提示框" onclick="extjsAlert2()"><hr><input type="button" value="單行輸入框" onclick="extjsPromt1()"><hr><input type="button" value="多行輸入框" onclick="extjsPromt2()"><hr><input type="button" value="確認框" onclick="extjsConfirm()"><hr><input type="button" value="自訂對話方塊" onclick="extjsShow()"><hr><input type="button" value="等待對話方塊" onclick="extjsWait1()"><hr><input type="button" value="進度對話方塊" onclick="extjsProgress()"><hr></center></body></html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
