[Ext]訊息提示視窗元件組 (三)

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 之間。