Ext.MessageBox.prompt()
如果要代替 JavaScrip 標準的 prompt() 訊息輸入方塊的話,那麼 Ext.MessageBox.prompt() 就是你的不二選擇,,它提供了一個 OK 鈕及一個 Cancel 鈕的訊息對話方塊。如果有提供回呼函數(CallBack)的話,則當使用者按下訊息對話方塊的鈕時就會觸發該函數(包括右上角的 X 關閉鈕),並把所按下那一個鈕的 id 及其所輸入的內容當做參數傳到函數中。
呼叫格式:
prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value] )
參數說明:
title : String
訊息對話方塊的標題
msg : String
訊息對話方塊的內容
fn : Function
(選填)當訊息對話方塊關閉後的回呼函數
scope : Object
(選填)回呼函數的作用範圍
multiline : Boolean/Number
(選填)如果設為 true 則會顯示多行的文字輸入框,或者是直接輸入指定的像素來當做輸入框的高度;預設是 false(單行)
value : String
(選填)指定文字輸入框的預設值;預設是 ""(空字串)
回傳值:
Ext.MessageBox
使用範例:
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> <!-- Ext.onReady(function(){ Ext.Msg.prompt('說明', '今天是西元多少年?', callBackFunc, this, 50, "2009"); function callBackFunc(id, text){ alert('你按下的鈕是' + id + ' 輸入的值是' + text); } }); //--> </script> |
瀏覽 0001/0006.html
要注意的是,當按下 Cancel 鈕或是右上角的 X 鈕均是回傳的 id 都一樣為 cancel;同時也會把所輸入的值當做參數傳給回呼函數:
Ext.MessageBox.wait()
有時可能執行某個動作後會需要一段不確定時間來處理的話,此時可能就會需要一個無止盡的進度列,Ext.MessageBox.wait() 可以用來達到想要的效果。
呼叫格式:
wait( String msg, [String title], [Object config] )
參數說明:
msg : String
進度列對話方塊的內容
title : String
進度列對話方塊的標題
config : Object
(選填)Ext.ProgressBar.waitConfig 物件
回傳值:
Ext.MessageBox
使用範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | <script type="text/javascript"> <!-- Ext.onReady(function(){ var wait = Ext.Msg.wait('請等待個幾秒鐘', '連線中..', { allowDomMove: true }); var sec = 0; setTimeout(actionFunc, 1000); function actionFunc(){ if(sec < 8){ wait.updateText('經過了' + (++sec) + '秒'); setTimeout(actionFunc, 1000); }else{ wait.hide(); } } }); //--> </script> |
瀏覽 0001/0007.html
我們這邊使用 Ext.MessageBox.updateText() 來修改訊息文字,且因為是無止盡的進度列,所以需要自己透過程式去關閉它:
Ext.MessageBox.progress()
如果想要能自行控制進度列的進度時,也可以考慮精簡版的 Ext.MessageBox.progress(),它可以讓你自行決定進度值及描述訊息的更新。
呼叫格式:
progress( String title, String msg, [String progressText] )
參數說明:
title : String
進度列對話方塊的標題
msg : String
進度列對話方塊的內容
progressText : String
(選填)顯示在進度列上的文字;預設是 ""(空字串)
回傳值:
Ext.MessageBox
使用範例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <script type="text/javascript"> <!-- Ext.onReady(function(){ var progress = Ext.Msg.progress('連線中..', '請等待個幾秒鐘', '進度 0 %'); var perc = 0; setTimeout(actionFunc, 1000); function actionFunc(){ if(perc < 100){ perc += 10; progress.updateProgress(perc/100, '進度 ' + perc + ' %', '請等待個幾秒鐘'); setTimeout(actionFunc, 1000); }else{ progress.updateProgress(perc/100, '進度 ' + perc + ' %', '終於完成了!!'); } } }); //--> </script> |
瀏覽 0001/0008.html
我們這邊使用 Ext.MessageBox.updateProgress() 來修改進度列的值、進度列對話框的內容跟顯示在進度列上的文字。它也跟 wait() 一樣都要自己透過程式去關閉它:
在使用 Ext.MessageBox.updateProgress() 來修改進度列值時要另外需要注意的是,它的值是介於 0 跟 1 之間。