[ExtJs5.1.0系列-第2天] 信息提示框組件

    在介紹ExtJs信息提示框組件以前，咱們先來介紹一下ExtJs的組件配置。

    ExtJs組件一般有兩種配置形式: (1) 用逗號分割的參數列表;  (2) 使用JSON對象做爲組件提供配置信息。對於比較簡單的配置通常採用逗號分隔的參數列表進行設置，對於較複雜的配置通常採用JSON對象的方式爲組件提供配置信息。

    JSON簡單介紹:

    JSON的全稱是JavaScript Object Notation(JavaScript對象符號)。JSON是一種結構化的，輕量級的，徹底獨立於語言的，基於文本的數據傳輸格式，在不少場合下用來替代XML文件格式。在表達相同的信息時，JSON比XML造成的文件更小、更便於機器解析。

    JSON格式很是適合於那些具備一些屬性和值得簡單對象，它以"{"開始，以"}"結束，屬性名和值用":"分隔，屬性間用","分隔。

    更多關於JSON的介紹，請移步: http://www.json.org/ (都是很簡單的英文，你們看一下，後續有時間將在博客中介紹JSON的使用)

----------------------------------------------------------------------------------------------------- 信 息 提 示 框 組 件 -----------------------------------------------------------------------------------------------------

    信息提示框組件介紹:

    Ext.window.MessageBox是一個工具類，它繼承自Ext.window.Window對象，用來生成各類風格的信息提示對話框，其實例對象可經過Ext.MessageBox或Ext.Msg進行訪問，使用Ext.MessageBox和使用Ext.Msg效果相同。下面將介紹ExtJs中各類各樣的信息組件提示框。

1. Ext.MessageBox.alert()

    一個只讀信息提示框，用來代替JavaScript標準的alert()方法，有一個肯定按鈕，若是爲其提供一個回調函數，則該函數將在單擊按鈕後被調用(不包括右上角的退出按鈕)，所單擊按鈕的id將被做爲惟一的參數傳遞到回調函數中。

    調用格式: 

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

    參數說明:

        title: 提示框的標題;

        msg: 顯示的信息內容;

        [Function fn]: (可選) 回調函數;

        [Object scope]: (可選) 回調函數的做用域。

    返回值: Ext.window.MessageBox

    示例代碼:

Ext.onReady(function() {  
	Ext.Msg.alert('Information','Hello World, LvSantorini', callback_alert);  
	function callback_alert(id) {
		console.log("單擊的按鈕ID是: " + id);
	}
});

    運行結果:

    <圖片內容僅做爲示例，實際點擊OK按鈕，信息提示框消失，而後控制檯輸出. >

    注意：ExtJs中方法調用格式中的參數名稱不一樣於Java，若是使用JSON配置方法，每一個參數的類型要對應，名稱也要對應(JSON配置將在本小節最後講到)

2.    Ext.MessageBox.confirm()

    顯示一個確認信息提示框，用來代替JavaScript標準的confirm()方法，具備兩個按鈕"是"和"否"，若是爲其提供一個回調函數，則該函數將在單擊按鈕後被調用，所單擊按鈕的id將被做爲惟一的參數傳遞到回調函數中。

    調用格式:

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

    參數說明: 參數含義與Ext.MessageBox.alert()相同

    返回值: Ext.widnow.MessageBox

    示例代碼:

Ext.Msg.confirm('Information', 'Hello World, LvSantorini', callback_confirm);
function callback_confirm(id) {
	if (id == 'yes') {
		console.log("單擊的按鈕ID是: " + id);
	}
	if (id == 'no') {
		console.log("單擊的按鈕ID是: " + id);
	}
}

    運行結果:

    

3.  Ext.MessageBox.prompt()

    顯示一個獲取用戶輸入信息的提示框，用來代替JavaScript標準的prompt()方法，有兩個按鈕"肯定"和"取消",並提供文本輸入框接收用戶的輸入，若是爲其提供一個回調函數，則該函數將在單擊按鈕後被調用,所單擊按鈕的id和文本框中的內容將做爲參數傳遞到回調函數.

    調用格式:

    prompt(String title, String msg, [Function fn], [Object scope], [Boolean/Number multiline], [String value])

    參數說明:

        前4項參數說明參考Ext.MessageBox.alert()相關內容.

        [Boolean/Number multiline]: 設置爲false將顯示一個單行文本域，設置爲true將以默認高度顯示一個多行文本區。或者以像素爲單位直接設置文本域的高度。默認爲false

        [String value]: 設置文本輸入框中的默認值

    返回值: Ext.widnow.MessageBox

    示例代碼:

Ext.onReady(function() {  
	Ext.Msg.prompt('Information', '請輸入些什麼吧...', callback_prompt, this, false, '我是默認值');
	function callback_prompt(id, msg) {
		if (id == 'ok') {
			console.log("單擊的按鈕ID是:" + id + "; 輸入的內容是:" + msg);
		}
		if (id == 'cancel') {
			console.log("單擊的按鈕ID是:" + id + "; 輸入的內容是:" + msg);
		}
	}
});

    運行結果:

        

4.  Ext.MesssageBox.wait()

    顯示一個自動滾動的進度條提示框，它常常被用在一個耗時的交互操做當中，它不能定義一個時間間隔自動關閉，程序員有責任在交互操做完成以後去關閉它。

    調用格式:

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

    參數說明:

        msg: 顯示的信息內容;

        [String title]: 提示框的標題，爲可選參數;

        [Object config]: 用於配置進度條的配置對象，爲可選參數. [Ext.ProgressBar.wait]

    返回值: Ext.window.MessageBox

    示例代碼:

Ext.onReady(function() {  
	Ext.Msg.wait('請耐心等待,操做將在幾分鐘內完成...', 'Information');
});

    運行結果:

    

5.  Ext.MessageBox.show()

    基於配置來顯示新的信息提示框或重置一個已存在的信息提示框，前面介紹的4個提示框內部調用的都是這個方法，儘管那些調用都簡單快捷，可是它們並不支持全部的配置項，要創建更加個性化，功能強大的提示框還須要從掌握Ext.MessageBox.show方法作起。

    調用格式:

        show(Object config)

    參數說明:

        一個包含提示框配置信息的配置對象

    返回值: Ext.window.MessageBox

    下面的表格中列出了Ext.MessageBox.show配置對象的經常使用配置項。 

                                                                                                                            Ext.MessageBox經常使用配置項

配置項	類型	說明
title	String	提示框的標題
msg	String	顯示的信息內容
width	Number	對話框的寬度,以像素爲單位
maxWidth	Number	對話框的最大寬度,默認爲600像素
minWidth	Number	對話框的最小寬度,默認爲100像素
closable	Boolean	false將隱藏右上角的關閉按鈕,默認爲true.若是已設置wait或progress爲true,則該配置將被忽略,提示框只能經過程序關閉,不能經過右上角的關閉按鈕關閉
modal	Boolean	true爲模式窗口,false爲非模式窗口
fn	Function	回調函數,他將在點擊控制按鈕,關閉按鈕或者輸入按鈕,離開對話框時被調用,若是已設置wait或progress爲true則該配置被忽略. 參數說明: buttonId: 按鈕id,如ok,yes,no,cancel text:輸入的文字 opt: 傳入show方法的配置對象
buttons	Number/Boolean	按鈕組,默認爲false,不顯示任何按鈕
progress	Boolean	True則顯示一個進度條,默認爲false,該進度條須要由程序控制滾動
progressText	String	進度條上顯示的問題,默認爲''
proxyDrag	Boolean	True則像是一個高亮的拖動代理,默認爲false
wait	Boolean	True則顯示一個自動滾動的進度條,默認爲false
waitConfig	Object	等待進度條的配置對象,在wait爲true時有效
prompt	Boolean	True則顯示一個單行文本域,默認爲false
value	Boolean	若是prompt設置爲true,則value值將顯示在文本域中
multiline	Boolean	若是prompt設置爲true,則multiline爲true顯示爲多行文本區,false顯示單行文本域
defaultTextHeight	Number	多行文本區的默認高度,默認值爲75像素
icon	String	一個樣式文件,它爲對話框提供一個背景圖,下邊還有一個詳細列表

                       Buttons已提供配置對象說明

提示框按鈕配置對象	說明
Ext.Msg.CANCEL	只顯示一個"取消"按鈕
Ext.Msg.NO	只顯示一個"否"按鈕
Ext.Msg.OK	只顯示一個"肯定"按鈕
Ext.Msg.OKCANCEL	顯示"肯定"和"取消"按鈕
Ext.Msg.YES	只顯示一個"是"按鈕
Ext.Msg.YESNO	顯示"是"和"否"按鈕
Ext.Msg.YESNOCANCEL	顯示"是"，"否"和"取消"按鈕

               icon配置項經常使用值

樣式類	說明
Ext.Msg.ERROR	錯誤圖標
Ext.Msg.IFNO	信息圖標
Ext.Msg.QUESTION	問題圖標
Ext.Msg.WARNING	警告圖標

    示例代碼:

Ext.onReady(function() {
	Ext.MessageBox.show({
		titile: 'Information',
		msg: '一個信息輸入框,三個按鈕',
		icon: Ext.MessageBox.INFO,
		buttons: Ext.MessageBox.YESNOCANCEL,
		fn: callback_show,
		prompt: true,
		modal: true
	});
	
	function callback_show(id, msg) {
		console.log('輸入內容爲:' + msg + '; 點擊了按鈕:' + id);
	}
});

    運行結果:

    

以上介紹了Ext.MessageBox的各類經常使用提示對話框組件以及如何自定義對話框，下面咱們來看看Ext.MessageBox還爲咱們提供了哪些其餘功能

------------------------------------------------------------------------------------------------------------- 小白Vv白白 的分割線 -------------------------------------------------------------------------------------------------------------

1. 改變默認的按鈕文字

示例代碼:

Ext.onReady(function() {
	Ext.Msg.buttonText.ok = '肯定';
	Ext.Msg.buttonText.cancel = '取消';
	
	Ext.MessageBox.show({
		title: 'Information',
		msg: '信息提示對話框',
		modal: true,
		buttons: Ext.MessageBox.OKCANCEL,
		fn: callback_show
	});
	function callback_show(id) {
		console.log('點擊了按鈕:' + id);
	}
});

    運行結果:

    

2. 動態更新提示框

• 更新提示文字(msg)

    調用格式: updateText([String text])

    參數說明:

        [String text]: 顯示的信息內容，爲可選參數

    返回值: Ext.windw.MessageBox

    示例代碼:

Ext.onReady(function() {
	var msgBox = Ext.MessageBox.show({
		title: 'Information',
		msg: '動態更新文字',
		buttons: Ext.MessageBox.OK,
		fn: function() {
			// 中止定時任務
			Ext.TaskManager.stop(task);
		}
	});
	// Ext.TaskManager是一個功能類,用來定時執行程序
	var task = {
		run:function() {
			msgBox.updateText("當前時間: " + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));
		},
		interval: 1000
	}
	Ext.TaskManager.start(task);
});

    運行結果:

    

• 更新進度條及提示信息

    調用格式:    

        updateProgress(Number value, String progressText, String msg)

        該方法在progress: true的狀況下會生效

    參數說明:

        value: 0~1的數字，默認爲0

        progressText: 進度條上顯示的文字

        msg: 顯示的信息內容

‍    ‍返回值: Ext.window.MessageBox
    示例代碼:

Ext.onReady(function() {
	var msgBox = Ext.MessageBox.show({
		title: 'Information',
		msg: '動態更新進度條和信息文字',
		modal: true,
		progress: true
	});
	
	var count = 0; //滾動條被刷新次數
	var percentage = 0; //進度百分比
	var progressText = ''; //進度條信息
	
	var task = {
		run: function() {
			count ++;
			// 計算進度
			percentage = count / 10;
			// 進度條顯示文字信息
			progressText = '當前完成度: ' + percentage * 100 + "%";
			msgBox.updateProgress(percentage, progressText, '當前時間: ' + Ext.util.Format.date(new Date(), 'Y-m-d g:i:s A'));
			if (count > 10) {
				Ext.TaskManager.stop(task);
				msgBox.hide();
			}
		},
		interval: 1000
	}
	Ext.TaskManager.start(task);
});

    運行結果:

    

    注意：

    Ext.MessageBox提供的信息提示框與JavaScript提供的原始信息提示框alert的差異:

    1. 實現方式。標準JavaScript提供的信息提示框對話框是一個真正的彈出窗口，而Ext.MessageBox提供的對話框是在當前頁面顯示一個層(div);

    2. 顯示信息的格式。標準JavaScript提供的信息提示對話框中所顯示的內容只能是純文本，不能夠顯示HTML格式文本，也不可以使用HTML中格式化方法進行排版，而Ext.MessageBox既支持純文本也一樣可使用HTML格式文本，顯示效果豐富多彩;

    3. 對程序運行的影響。標準JavaScript提供的信息提示框會對JavaScript程序的運行產生阻塞，而Ext.MessageBox是異步的，它的調用不會中止瀏覽器中代碼的執行。若是須要實現JavaScript信息提示框的功能，Ext.MessageBox須要經過回調函數來控制程序執行。