Ext.MessageBox.show()
前面介紹的訊息提示視窗都是使用很簡單的方式來取代原來標準的 JavaScript 對話方塊,不過如果想要有更進階、功能更強大的訊息提示對話方塊的話,那就得要使用 Ext.MessageBox.show()。
呼叫格式:
show( Object config )
參數說明:
config : Object
支援以下的選項
- animEl : String/Element
訊息提示視窗動畫顯示或關閉時的目標元素或 ID;預設 undefined - buttons : Object/Boolean
訊息提示視窗的按鈕設定,例如 Ext.MessageBox.OKCANCEL 或 {ok:'確定', cancel:'不要'},或者設為 false 則不顯示任何按鈕;預設 false - closable : Boolean
是否顯示右上角的關閉鈕,設 false 則不顯示;預設為 true
如果有設定 wait 或 progress 為 true 時則會忽略此參數,對話方塊只能透過程式自行關閉 - cls : String
套用訊息提示視窗內容的自訂的 CSS 的 className 值 - defaultTextHeight : Number
如果 prompt 為 true 且 multiline 為 true 時,此 defaultTextHeight 值為文字輸入框的高度,以像素為單位;預設 75
不過我怎麼試都沒有任何效果?! - fn : Function
當訊息對話方塊關閉後的回呼函數 - scope : Object
回呼函數的作用範圍 - icon : String
一個 CSS 的 className 值,可提供訊息對話方塊的背景圖示,例如 Ext.MessageBox.WARNING 或 'custom-class';預設 ""(空字串) - iconCls : String
一個標準的 Ext.Window.iconCls,可提供訊息對話方塊標題的背景圖示;預設 ""(空字串) - maxWidth : Number
訊息對話方塊最大的寬度,以像素為單位;預設是 600 - minWidth : Number
訊息對話方塊最小的寬度,以像素為單位;預設是 100 - modal : Boolean
true 則會在顯示為模式窗口(Block),false 則為非模式窗口;預設 true - msg : String
訊息對話方塊的內容 - multiline : Boolean
如果 prompt 設為 true 時,當 multiline 為 true 則顯示多行的文字輸入框,false 則為單行文字輸入框;預設 false - progress : Boolean
設為 true 則顯示進度列對話框;預設是 false - progressText : String
progress 設為 true 時,則 progressText 值會顯示在進度列上 - prompt : Boolean
設為 true 則顯示單行文字輸入框;預設是 false - proxyDrag : Boolean
如果設為 true 的話,則在拖曳訊息提示視窗時會顯示一個替代的視窗;預設為 false
不過我怎麼試都沒有任何效果?! - title : String
訊息對話方塊的標題 - value : String
prompt 設為 true 時,則 value 值會顯示在文字輸入框中 - wait : Boolean
設為 true 則顯示一無止盡的進度列;預設為 false - waitConfig : Object
一個 Ext.ProgressBar.waitConfig 物件;只有在 wait 為 true 時可使用 - width : Number
訊息對話方塊的寬度,以像素為單位
回傳值:
Ext.MessageBox
使用範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <script type="text/javascript"> <!-- Ext.onReady(function(){ var progress = Ext.Msg.show({ animEl: 'btn', title: '範例', msg: '這是一個有趣的訊息提示視窗範例', prompt: true, value: '謝謝你', wait: true, modal: false, buttons: {yes: '是的', no: '不對吧', cancel: '無聊'}, fn: callBackFunc }); function callBackFunc(id, text){ alert('你按下的鈕是:' + id + '\r\n輸入的值是:' + text); } }); //--> </script> |
瀏覽 0001/0009.html
因有指定的 animEl 值,所以一開始仔細注意一下訊息提示視窗是從那邊飛出來的;且 modal 為 false 的關係,所以背景就不會有 Block 視窗:
Ext.MessageBox 其它相關功能
其實 Ext.MessageBox 中常用到的主要功能都有介紹到,也能滿足大部份的情況使用。當然還提供了其它更方便訂製的功能讓使用者來自由使用,像是能變更按鈕文字、動態更新訊息內容等等。接下來會分別就這兩部份再說明:
1.變更預設的按鈕文字
不知道是否有人注意到上一個範例中的按鈕是顯示中文字呢?沒錯,透過那樣的方式就能以很簡單的方式來變更顯示文字。不過如果訊息提示視窗太多的話,那就變成都要一一設定,感覺就又很麻煩。因此 Ext.MessageBox 還多提供了 buttonText 屬性來讓使用者改變全域預設的文字值。
使用範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <script type="text/javascript"> <!-- Ext.onReady(function(){ Ext.MessageBox.buttonText = { yes: '是~', no: '不要按' } var progress = Ext.Msg.show({ title: '範例', msg: '這是變更預設的按鈕文字範例 1', buttons: Ext.MessageBox.YESNO }); }); //--> </script> |
瀏覽 0001/0010.html
buttonText 的設定要在訊息對話方塊顯示之前才有效;不過因為這樣的設定是會改變全部的 buttonText 值,所以像是 cancel、ok 這些沒有設定到的話,它們就會變成空白了:
除非全部都要變更,否則可以只指定某些有用到的屬性值就可以了,這樣就不會覆蓋了其它屬性
使用範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type="text/javascript"> <!-- Ext.onReady(function(){ Ext.MessageBox.buttonText.yes = '是~'; Ext.MessageBox.buttonText.no = '不要按'; var progress = Ext.Msg.show({ title: '範例', msg: '這是變更預設的按鈕文字範例 2', buttons: Ext.MessageBox.YESNOCANCEL }); }); //--> </script> |
瀏覽 0001/0011.html
一一指定的話,其它沒指定的就會用預設值來顯示;要特別注意的是,當使用 buttonText 來指定時,其子屬性都要小寫:
2.動態更新訊息內容
這部份其實就在介紹 wait() 跟 progress() 時就有使用到了,因此讓我們直接來看範例
使用範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script type="text/javascript"> <!-- Ext.onReady(function(){ var progress = Ext.Msg.show({ title: '範例', msg: '這是動態更新訊息內容及進度列', progress: true, buttons: Ext.MessageBox.YESNO }); var times = 0; setTimeout(actionFunc, 1000); function actionFunc(){ times++; progress.updateProgress(times/10, '進度 ' + (times*10) + ' %'); if(times<10){ progress.updateText('這是第 ' + times + ' 次更新訊息提示內容!'); setTimeout(actionFunc, 1000); }else{ progress.updateText('恭喜你~進度已經 100 % 了!!'); } } }); //--> </script> |
瀏覽 0001/0012.html
updateText() 是用來更新訊息內容用;updateProgress() 除了更新進度列的值及進度列上的文字之外,第三個參數如有提供的話,也能更新訊息內容:
Ext.MessageBox 其它相關屬性
buttons : Object
支援以下的選項;使用時要注意大小寫 Ext.MessageBox.CANCEL 或 Ext.Msg.OKCANCEL
- CANCEL : Object
顯示一個 Cancel 鈕 - OK : Object
顯示一個 OK 鈕 - OKCANCEL : Object
顯示兩個按鈕,OK 鈕跟 Cancel鈕 - YESNO : Object
顯示兩個按鈕,Yes 鈕跟 No 鈕 - YESNOCANCEL : Object
顯示三個按鈕,Yes 鈕、 No 鈕跟 Cancel 鈕
icons : String
支援以下的選項;使用時要注意大小寫 Ext.MessageBox.ERROR 或 Ext.Msg.INFO
- ERROR : String
顯示一個錯誤圖示 - INFO : String
顯示一個資訊圖示 - QUESTION : String
顯示一個問題圖示 - WARING : String
顯示一個警告圖示
使用範例:
使用內建的圖示
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> <!-- Ext.onReady(function(){ var progress = Ext.Msg.show({ title: '範例', msg: '我是有 icon 圖示的~', icon: Ext.MessageBox.INFO, buttons: Ext.MessageBox.YESNO }); }); //--> </script> |
使用自訂的圖示
1 2 3 4 5 6 7 8 9 10 11 12 | <script type="text/javascript"> <!-- Ext.onReady(function(){ var progress = Ext.Msg.show({ title: '範例', msg: '我是自訂 icon 圖示的~', icon: 'abgne-other', buttons: Ext.MessageBox.YESNO }); }); //--> </script> |
瀏覽 0001/0013.html
要使用自訂的圖示的話,就要先設好一個 className,並加上 background 的一些屬性:
大大請問一下怎麼讓FormPanel在視窗水平、垂直置中呢@@?
因為我是把FormPanel寫成js然後載入的~
bodyStyle 設定是FormPanel裡面的Style那整個物件要怎麼設比較好呢^^"
大大請問一下怎麼讓Button變成按一般的超連結按鈕呢@@?