[ ExtJS2.0 開發指南 ] CH3 : ExtJS 的基本功能 - 訊息提示框組件基礎

前言 : 
在程序開發中最常見也最常用的組件就是信息提示框了, 在 Web 頁面中 alert() 可以用來向用戶提示各種信息. 但其單調的介面卻不足以滿足用戶挑剔的目光. ExtJS 提供了一系列美觀實用的信息提示組件, 現在來看看它們如何配置與使用. 

認識 Ext.MessageBox : 
Ext.MessageBox 是一個工具類, 它繼承自 Object 對像, 用來生成各種風格的信息提示對話框. Ext.Msg 是該類別的別名, 使用 Ext.MessageBox 和使用 Ext.Msg 有相同效果. 在介紹前先來了解一下 Ext.MessageBox 提供的信息提示框與 JavaScript 提供的原始信息提示框的差別. 主要比較三個方面 : 實作方式, 顯示信息的格式和對程序運行的影響. 下面針對這三方面進行說明. 
- 實現方式 
標準 JavaScript 提供的信息對話框是一個真正的彈出視窗. Ext.MessageBox 提供的信息提示對話框並不是真正的彈出窗口, 它只是當前頁面的一個層 (div), 所以無法用窗口捕抓軟件來得到它. 

- 顯示信息的格式 
標準 JavaScript 提供的信息提示框中所顯示的內容不是 HTML 而是純文本. 不能使用 HTML 中的格式方法進行排版, 只能以空格回車與各種符號來建構顯示格式. Ext.MessageBox 提供的信息提示框顯示的文本不僅支持純文本顯示, 也能使用 HTML 進行排版, 效果更加多樣化. 下面是一個簡單比較範例 : 

在上面代碼我們可以看到 HTML 標籤在 ExtJS 的 alert() 產生了效果, 控制了顯示樣式. 底下為兩個樣式的比較 : 
 

- 對程序運行的影響 
標準 JavaScript 提供的訊息提示框會對 JavaScript 程序的運行產生阻塞效果. 但是 Ext.MessageBox 是異步的, 因此它的調用並不會停止瀏覽器中代碼的執行. 參考下面代碼可以發現在 Ext.MessageBox 的提示框出現後, 標準的 提示框還是能出現, 到是如果顛倒顯示的順序, 將只看到標準的提示框 (因為 Ext.MessageBox 被阻塞) : 

執行結果 : 
 

Ext.MessageBox.alert() : 
一個訊息提示框可以提供一個回調函數, 該函數將在單擊"確定"按鈕後被調用 (包括右上角的退出按鈕), 而所單擊按鈕的 id 將被作為唯一的參數傳遞到回調函數中. 
調用格式 : 

alert( String title, String msg, [Function fn], [Object scope] )

參數說明 : 

title : 提示框標題
msg : 顯示的訊息內容
[Function fn] : (可選) 回調函數.
[Object scope] : (可選) 回調函數的作用域.

返回值 : 

Ext.MessageBox

範例代碼 : 

Ext.MessageBox.confirm() : 
顯示一個確認訊息框, 用來替代 JavaScript 標準 confirm() 方法. 具有兩個按鈕 "是" 與 "否", 如果為其提供一個回調函數, 則該函數將在點擊按鈕後被調用 (包括右上角的退出按鈕), 所單擊按鈕的 id 將被做為唯一參數傳遞到回調函數中. 
調用格式 : 

confirm( String title, String msg, [Function fn], [Object scope] )

參數說明 : 

參考 Ext.MessageBox.alert() 相關內容.

返回值 : 

Ext.MessageBox

範例代碼 : 

執行結果 : 
 

Ext.MessageBox.prompt() : 
顯示一個獲取用戶輸入訊息的提示框, 用來替代 JavaScript 標準的 prompt() 方法, 有兩個按鈕 "確定" 與 "取消". 並提供文本輸入框接收用戶輸入, 如果提供一個回調函數, 則該函數將在按鈕點擊後被調用, 點擊按鈕的 id 將是回調函數的傳入參數. 
調用格式 : 

prompt( String title, String msg, [Function fn], [Object scope], [Boolean/Number multi-line] )

參數說明 : 

前四項說明參考 Ext.MessageBox.alert() 相關內容.
[Boolean/Number multi-line] : 設置false 將顯示一個單行文本域, 設置為 true 將以默認高度顯示一個多文本區. 或者以像素為單位直接設置文本域的高度. 默認為 false.

返回值 : 

Ext.MessageBox

範例代碼 : 

執行結果 : 
 

Ext.MessageBox.wait() : 
顯示一個自動翻滾的進度條提示框. 它經常被用在一個耗時的交互操作中, 它不能定義一個時間間隔自動關閉, 程序員有責任在交互操作完成後關閉它. 
調用格式 : 

wait( String msg, [String title], [Object config] )

參數說明 : 

msg : 顯示的訊息內容
[String title] : 提示框的標題 (Optional)
[Object config] : 用於配置進度條的配置對像. (Optional)

返回值 : 

Ext.MessageBox

範例代碼 : 

執行結果 : 
 

Ext.MessageBox.show() : 
用於配置來顯示信的訊息提示框或重置一個已經存在的訊息提示框, 前面介紹的 3 種提示框內部調用的都是這個方法. 儘管調用快捷, 但是它們並不支持所有的配置項, 要建立更加個性化, 功能更強大的提示框還需要從掌握 Ext.MessageBox.show() 方法做起. 
Ext.MessageBox.show 方法支持的配置項非常豐富, 不但可以配置提示標題, 提示訊息, 回調函數等常見部分, 它還提供了配置按鈕文字及提示圖標等方法, 給我們控制訊息提示框的各種可能性. 下面將分別給出這些配置項並分為 2 個列表來說明. 
表 3-1 主要包括常用配置項, 這裡並沒有包括所有的可配置項, 更多可參考線上API Ext.MessageBox Config Options 說明 : 
 

表3-2 列舉了配置項 buttons 可選的各種常見值, 這些值決定提示框按鈕顯示方式 : 
 

下面對 Ext.MessageBox.show 使用進行簡單說明. 
調用格式 : 

show( Object config )

參數說明 : 

包含一個提示框的配置訊息對像.

返回值 : 

Ext.MessageBox

範例代碼 : 

執行結果 : 
 

Ext.MessageBox 的其他功能 : 
到此已經介紹了 Ext.MessageBox 類的主要功能. 這些功能可以滿足大部分需求, 而 Ext.MessageBox 提供的功能還不止這些, 它還提供靈活客置能力. 包括改變默認的按鈕文字, 動態更新提示框, 下面將針對這兩個部分進行介紹. 
1. 改變默認的按鈕文字 
通過 Ext.Msg.YESNOCANCEL 等配置對像創建的按鈕文字不滿足需求, 該如何改變它呢? Ext.MessageBox 提供了 buttonText 配置項, 通過提供配置對像, 就能改變默認的按鈕文字. 為 buttonText 配置賦值有兩種方式, 都可以達到修改默認按鈕文字的目的, 下面範例代碼進行說明 : 

執行結果 : 
 
注意 : 

上面方式會覆改所有的提示文字, 如果在配置對像中提供的訊息不完全就會出現按鈕上沒有文字的現像.

第二個方法不用把 buttonText 的默認配置對像替換掉, 而只要改變某個屬性就可以, 參考範例代碼如下 : 

執行結果 : 
 

2. 動態更新提示框 
下面我們來看看如何動態變更提示框的文字內容. 
調用格式 : 

updateText([String text])

參數說明 : 

[String text] : 顯示的訊息內容

返回值 : 

Ext.MessageBox

範例代碼 : 

執行結果 : 
 

3. 更新進度條及提示訊息 
在前一個範例代碼週期性地調用 updateText 方法, 它將最新的系統時間更新到信息提示框中, 在實際的應用中可以用來動態顯示程序的執行狀態. 下面說明如何透過 updateProgress() 動態更新提示框上面的進度條. 
調用格式 : 

updateProgress(Number value, String progressText, String msg) // 該方法會在 progress: true 下生效.

參數說明 : 

value: 0-1 之間的數字, 默認為 0
progressText : 進度條上的文字
msg : 顯示的信息內容

返回值 : 

Ext.MessageBox

範例代碼 : 

執行結果 :