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

不管是桌面應用程式或是 Web 網頁，常會用到的就是訊息視窗，例如 JavaScript 的 alert()、confirm() 或是 .NET 的 MessageBox.Show() 之類的。不過 Web 中的 alert() 等的樣式其實很單調簡陋，所以很多 Web 開發者都會想找找更美觀的訊息視窗來滿足一些客戶的需求。Ext JS 就針對這部份提供了一系列更美觀實用的 Ext.MessageBox 訊息提示視窗元件組，讓我們一起來測試各種不同的訊息提示視窗效果跟使用設定吧。

認識 Ext.MessageBox

Ext.MessageBox 是繼承 Object 的工具類別，提供有別於一般常見的訊息提示視窗樣式。而 Ext.Msg 是此類別的別名，不管是用 Ext.MessageBox 或是 Ext.Msg 都能達到同樣的效果，只是 Ext.Msg 提供更簡短的使用方式。在開始介紹 Ext.MessageBox 之前，要先了解它跟 JavaScript 的訊息提示視窗的差異性。我們就針對兩者的顯示方式、顯示的訊息內容格式及對程式流程的影響等方面來說明。

1.顯示方式
標準的 JavaScript 所提供的訊息提示視窗是一個貨真價實的對話方塊，就像我們的瀏覽器一樣是個真正的視窗。而 Ext.MessageBox 所提供的是使用 DIV 來模擬的視窗，並不是真正的對話方塊。



瀏覽 0001/0001.html

2.顯示的訊息內容格式
標準的 JavaScript 的訊息提示內容只能是純文字格式，而不能使用 HTML 格式的方式來呈現。語法如下：

1
2
3
4
5
6
7

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		alert('<font color="red">這是訊息內容</font>');
	});
//-->
</script>

而 Ext.MessageBox 不僅能用純文字格式來當訊息內容之外，還支援 HTML 格式內容，可使用來進行訊息內容的排版，讓整個訊息提示效果更加美觀。語法如下：

1
2
3
4
5
6
7

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		Ext.MessageBox.alert('<h3>說明</h3>', '<font color="red">這是訊息內容</font>');
	});
//-->
</script>

兩者的畫面放在一起比較，我想那個比較好應該是不用明說吧！



另外，Ext.MessageBox 甚至連圖片都可以在內容中使用，讓訊息可以更加直覺。



瀏覽 0001/0002.html

3.對程式流程的影響
標準的 JavaScript 所提供的訊息提示視窗會對 JavaScript 程式產生阻塞的同步反應，在執行訊息提示時，其後面的程式會等訊息對話方塊關閉才能繼續；反之，Ext.MessageBox 則是非同步的執行，因此並不會阻塞其之後的程式執行。如果要在 Ext.MessgaeBox 出現後且使用者有所回應時才接下去執行某些動作時，則要把該動作寫成一個函數給 Ext.MessageBox 當做回呼函數(CallBack)使用。這樣就能模擬標準 JavaScript 同步的效果。

我們先來看標準 JavaScript 的訊息對話方塊怎樣阻塞程式：

1
2
3
4
5
6
7
8

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		alert('標準 JavaScript 的訊息提示方塊會阻塞');
		Ext.MessageBox.alert('說明', 'Ext.MessageBox 的訊息提示方塊不會阻塞');
	});
//-->
</script>

我們會發現執行到 alert() 就停住了，接下去的程式並不會馬上執行，它要等到我們關閉對話方塊後才會繼續下去。反過來看 Ext.MessageBox 的執行反應：

1
2
3
4
5
6
7
8

<script type="text/javascript">
<!--
	Ext.onReady(function(){
		Ext.MessageBox.alert('說明', 'Ext.MessageBox 的訊息提示方塊不會阻塞');
		alert('標準 JavaScript 的訊息提示方塊會阻塞');
	});
//-->
</script>

瀏覽 0001/0003.html

儘管已經顯示了 Ext.MessageBox 訊息提示視窗，但接下來的 alert() 程式也是會接著執行出現。從這邊就能看出兩者的差異性，因此在使用時要注意這樣的動作是否在預期內。

接下來就依序介紹 Ext.MessageBox 的 alert()、confirm()、prompt()、wait()、progress()、show() 及其相關的屬性方法。

alert()、confirm() - 訊息提示視窗元件組 (二)

prompt()、wait()、progress() - 訊息提示視窗元件組 (三)

show()、Ext.MessageBox 其它相關功能及屬性- 訊息提示視窗元件組 (四)