在程序開發中最常見也最常用的組件就是信息提示框了, 在 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 將被作為唯一的參數傳遞到回調函數中.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
Ext.MessageBox.confirm() :
顯示一個確認訊息框, 用來替代 JavaScript 標準 confirm() 方法. 具有兩個按鈕 "是" 與 "否", 如果為其提供一個回調函數, 則該函數將在點擊按鈕後被調用 (包括右上角的退出按鈕), 所單擊按鈕的 id 將被做為唯一參數傳遞到回調函數中.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
Ext.MessageBox.prompt() :
顯示一個獲取用戶輸入訊息的提示框, 用來替代 JavaScript 標準的 prompt() 方法, 有兩個按鈕 "確定" 與 "取消". 並提供文本輸入框接收用戶輸入, 如果提供一個回調函數, 則該函數將在按鈕點擊後被調用, 點擊按鈕的 id 將是回調函數的傳入參數.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
Ext.MessageBox.wait() :
顯示一個自動翻滾的進度條提示框. 它經常被用在一個耗時的交互操作中, 它不能定義一個時間間隔自動關閉, 程序員有責任在交互操作完成後關閉它.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
Ext.MessageBox.show() :
用於配置來顯示信的訊息提示框或重置一個已經存在的訊息提示框, 前面介紹的 3 種提示框內部調用的都是這個方法. 儘管調用快捷, 但是它們並不支持所有的配置項, 要建立更加個性化, 功能更強大的提示框還需要從掌握 Ext.MessageBox.show() 方法做起.
Ext.MessageBox.show 方法支持的配置項非常豐富, 不但可以配置提示標題, 提示訊息, 回調函數等常見部分, 它還提供了配置按鈕文字及提示圖標等方法, 給我們控制訊息提示框的各種可能性. 下面將分別給出這些配置項並分為 2 個列表來說明.
表 3-1 主要包括常用配置項, 這裡並沒有包括所有的可配置項, 更多可參考線上API Ext.MessageBox Config Options 說明 :
表3-2 列舉了配置項 buttons 可選的各種常見值, 這些值決定提示框按鈕顯示方式 :
下面對 Ext.MessageBox.show 使用進行簡單說明.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
Ext.MessageBox 的其他功能 :
到此已經介紹了 Ext.MessageBox 類的主要功能. 這些功能可以滿足大部分需求, 而 Ext.MessageBox 提供的功能還不止這些, 它還提供靈活客置能力. 包括改變默認的按鈕文字, 動態更新提示框, 下面將針對這兩個部分進行介紹.
1. 改變默認的按鈕文字
通過 Ext.Msg.YESNOCANCEL 等配置對像創建的按鈕文字不滿足需求, 該如何改變它呢? Ext.MessageBox 提供了 buttonText 配置項, 通過提供配置對像, 就能改變默認的按鈕文字. 為 buttonText 配置賦值有兩種方式, 都可以達到修改默認按鈕文字的目的, 下面範例代碼進行說明 :
執行結果 :
注意 :
第二個方法不用把 buttonText 的默認配置對像替換掉, 而只要改變某個屬性就可以, 參考範例代碼如下 :
執行結果 :
2. 動態更新提示框
下面我們來看看如何動態變更提示框的文字內容.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
3. 更新進度條及提示訊息
在前一個範例代碼週期性地調用 updateText 方法, 它將最新的系統時間更新到信息提示框中, 在實際的應用中可以用來動態顯示程序的執行狀態. 下面說明如何透過 updateProgress() 動態更新提示框上面的進度條.
調用格式 :
參數說明 :
返回值 :
範例代碼 :
執行結果 :
沒有留言:
張貼留言