Ext信息提示對話框

　　Ext.window.MessageBox是一個工具類，他繼承自Ext.window.Windoe對象，用來生成各種風格的信息提示對話框，其實例對象可以通過Ext.MessageBox或Ext.Msg進行訪問，使用Ext.MessageBox和使用Ext.Msg有相同的效果，而後者提供了更簡短的調用方式。為了描述方便後邊我們將使用Ext.MessageBox代表Ext.window.MessageBox實例對象。

/**
**Ext.MessageBox和Ext.Msg只是引用了Ext.window.MessageBox的實例對象，Ext.Msg.alert方法調用的是Ext.window.MessageBox實例對象的alert方法，
**避免混淆兩者之間的關係
**/

　　Ext.MessageBox提供的信息提示對話框顯示的文本不僅支持純文本顯示，還支持使用HTML格式文本，採用HTML中的格式化方法進行排版，效果更佳豐富多彩 ，甚至可以在提示信息中增加動態圖標，使提示信息更加生動。

Ext.Msg.alert("提示","<font color=red>支持HTML格式文本</font>")

　　標準JS提供的信息提示對話框會對JS程式的運行產生阻塞。Ext.MessageBox是非同步的，它的調用並不會停止瀏覽器中代碼的執行，如果希望在信息提示框出現並且用戶做出反饋後才能調用程式，就需要吧相應程式組成一個函數，並且將該函數作為回調函數提供給Ext.MessageBox，再用戶做出反饋後該回調函數將被調用，這樣就可以達到控製程序執行的目的了。

Ext.onReady(function(){
    alert('我會停止程式的執行。');
    Ext.Msg.alert('提示','我不會停止程式的執行。');
})

/**
**執行代碼會看到標準alert顯示，而ExtJs版的alert並沒有同事顯示出來，說明程式的執行在顯示標準alert之後被阻塞了，導致接下來的代碼並沒有執行
**/

Ext.onReady(function(){
    Ext.Msg.alert('提示','我不會停止程式的執行。');
    alert('我會停止程式的執行。');
})

/**
**執行代碼會看到標準的alert與ExtJs的alert同時出現，說明ExtJs的alert是非同步執行的，他不會阻塞程式代碼的繼續執行，
**這是他與標準alert最大的區別，會對編寫代碼的方式產生一定的影響
**/

　　Ext.MessageBox.alert()

　　　　一個只讀信息提示框，用來代替js標準的alert()方法，有一個確定按鈕，如果為其提供一個回調函數，則該函數將在單擊按鈕後被調用（不包括右上角的退出按鈕），所單擊按鈕的id將被作為唯一的參數傳遞到回調函數中

調用格式：
alert(String title, String msg ,[Function fn],[Object scope])
參數說明：
title: 提示框標題;
msg: 顯示的信息內容;
[Function fn]: (可選) 回調函數;
[Object scope]: (可選) 回調函數的作用域;

示例：
Ext.Message.alert('提示','請單擊我，確認',callBack);
function callBack(id){
    alert('單擊的按鈕ID是：'+id);
}

　　Ext.MessageBox.confirm()

　　　　顯示一個確認信息框，用來代替JS標準的confirm()方法，具有兩個按鈕"是"和"否"，如果為其提供一個回調函數，則該函數將在單擊按鈕後被調用（不包括右上角的退出按鈕），所單擊按鈕的id將被作為唯一的參數傳遞到回調函數中。

　　　　Ext.MessageBox.confirm的使用方法，與alert類似該確認對話框也是非同步執行，不會造成代碼阻塞。

調用格式：
confirm(String title, String msg ,[Function fn],[Object scope])
參數說明：
title: 提示框標題;
msg: 顯示的信息內容;
[Function fn]: (可選) 回調函數;
[Object scope]: (可選) 回調函數的作用域;

示例：
Ext.Message.confirm('提示','請單擊我，確認',callBack);
function callBack(id){
    alert('單擊的按鈕ID是：'+id);
}

　　Ext.MessageBox.prompt()

　　　　顯示一個獲取用戶輸入信息的提示框，用來代替JS標準的prompt()方法，具有兩個按鈕"確認"和"取消"，並提供文本輸入框接受用戶的輸入，如果為其提供一個回調函數，則該函數將在單擊按鈕後被調用（不包括右上角的退出按鈕），所單擊按鈕的id將被作為唯一的參數傳遞到回調函數中。

調用格式：
prompt(String title, String msg ,[Function fn],[Object scope],[Boolean/Number multiline])
參數說明：
title: 提示框標題;
msg: 顯示的信息內容;
[Function fn]: (可選) 回調函數;
[Object scope]: (可選) 回調函數的作用域;
[Boolean/Number multiline]: 設置false將顯示一個單行文本域，設置為true將以預設高度顯示一個多行文本區。或者以像素為單位直接設置文本域的高度。預設flase
示例：
Ext.Message.prompt('提示','請輸入一些內容看看',callBack,this,true,"我是預設值");
function callBack(id,msg){
    alert('單擊的按鈕ID是：'+id+'/n'+'輸入的內容是：'+msg);
}

　　Ext.MessageBox.wait()

　　　　顯示一個自動滾動的進度條提示框，他經常被用在一個耗時的交互操作當中，他不能定義一個時間間隔自動關閉，程式猿有責任在交互操作完成之後去關閉它

調用格式：
wait(String msg ,[String title], [Object config])
參數說明：
msg: 顯示的信息內容;
title: 提示框標題,為可選參數;
[Object config]:用戶配置進度條的配置對象,為可選參數;

示例：
Ext.Message.wait('請等待，操作需要很長時間！','提示',{
    text:"進度條上的文字"
});

　　Ext.MessageBox.show()

　　　　基於配置來顯示新的信息提示框或重置一個已存在的信息提示框，前面介紹的3個提示框內部調用的都是這個方法，儘管那些調用的簡單快捷，但是他們並不支持所有的配置項，要簡歷更加個性化、功能更強大的提示框還需要從掌握Ext.MessageBox.show方法做起

　　　　Ext.MessageBox.show方法支持的配置項非常豐富，不但可以配置提示標題、提示信息、回調函數等常見的部分，他還提供了配置按鈕文字及提示圖片圖標的方法，給了我們控制信息提示框的各種可能性，下邊將分別給出這些配置項，和這些配置項共分為3個列表

Ext.MessageBox 常用配置項表

buttons已提供配置對象說明（區分大小寫）

icon圖標樣式配置

Ext.MessageBox.show({
    title:'提示',
    msg:'我有三個按鈕，和一個多行文本區',
    modal:true,
    prompt:true,
    value:'請輸入',
    fn:callBack,
    buttons:Ext.Msg.YESNOCANCEL,
    icon:Ext.Msg.QUESTION
})
function callBack(id,msg){
    alert('單擊的按鈕ID是：'+id+'\n'+'輸入的內容是：'+msg);
}

　　　　改變預設的按鈕文字

//這種方法會覆蓋所有的提示文字，會對設置後所有的信息提示框上的按鈕文字產生影響，如果要再次改變按鈕文字就需要多次設置
//OK
Ext.MessageBox.msgButtons[0].setText(''按鈕ok);
//YES
Ext.MessageBox.msgButtons[1].setText('按鈕yes');
//NO
Ext.MessageBox.msgButtons[2].setText('按鈕no');
//CANCEL
Ext.MessageBox.msgButtons[3].setText('按鈕cancel');

　　　　動態更新提示框內容

var msgBox = Ext.MessageBox.show({
    title:"提示",
    msgL"動態更新的信息文字",
    modal:true,
    buttons:Ext.Msg.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);

 　　　　更新進度條及提示信息示例

var msgBox = Ext.MessageBox.show({
    title:"提示",
    msg:'動態更新的進度條和信息文字"，
    modal:true,
    width:300,
    progress:true
})
var count = 0;    //滾動條被刷新的次數
var percentage = 0; //進度百分比
var progressText = ""; //進度條信息

var task = {
    run : function(){
        count++;
        //計算進度
        precentage = count/10;
        //生產進度條文字
        progressText = "當前完成度："+percentage*100+"%";
        //更新信息提示對話框
        msgBox.updateProgress(percentage,progressText,
            '當前時間：'+Ext.util.Format.date(new Date(),'Y-m-d g:i:s A');
        )
        //刷新10次後關閉信息提示對話框
        if(count > 10){
            Ext.TaskManager.stop(task);
            msgBox.hide();
        }
    },
    interval:100
}
Ext.TaskManager.start(task);