MessageBox：彈出窗口

Ext.onReady(function () {
    Ext.MessageBox.alert("提示信息!","Hello World!");
});

 

Ext，是一個對象，onReady是Ext的准備函數。

Ext相關的代碼都會在onReady函數中編寫，類似於window的onload方法，以及jQuery中的onReady方法。

其執行時機是在頁面DOM對象加載完畢后立即執行（這點和jQuery是一樣的，window的onload方法，是在整個頁面元素都加載完后才執行）。

 

MessageBox：這是ExtJs提供的彈出提示框組件

Ext.MessageBox，可以簡寫成Ext.Msg，Msg對象有一個alert方法，其方法聲明為：

alert( String title, String msg, [Function fn], [Object scope] ) : Ext.window.MessageBox

Parameters

• title : String

  標題條文本

• msg : String

  消息盒本體文本

• fn : Function (optional)

  消息盒子關閉（點擊關閉或者確認按鈕）后調用的回調函數

• scope : Object (optional)

  回調函數被執行的范圍(this reference)。

  Defaults to: window

Returns

• Ext.window.MessageBox

  this

 

Ext.MessageBox對象，是Ext.Window.MessageBox接口的單例實現

 

Ext.onReady(function () {
    Ext.Msg.alert("提示信息!","Hello World!",function () {
        console.info("我是回調函數")
    },this);
});

 

MessageBox對象的alert方法，不同於JavaScript中的alert，MessageBox的alert，其實只是一個div，只不過加了一些樣式，使其看起來像個彈窗。

怎么驗證呢？

只要前后分別調用alert和MessageBox.alert，真正的彈窗，是會發生堵塞的。

 

 

其他Ext.Msg對象的常用方法

confirm方法：確認/取消 彈出框

        Ext.onReady(function () {
            Ext.Msg.confirm("標題","Yes Or No",function (op) {
                if (op == "yes"){
                    alert("確認了");
                    //點擊確認后要執行的操作
                }else{
                    alert("取消了");
                    //點擊取消后要執行的操作
                }
            },this);
        })

　　回調函數有一個參數，傳遞的是用戶點擊的按鈕，如果點擊了確認，就傳遞yes，如果點擊了取消，就傳遞no

prompt方法：有輸入框的確認/取消 彈出框

        Ext.onReady(function () {
            Ext.Msg.prompt("標題","請輸入姓名：",function (id,val) {
                //id=ok id=cancel
                if ("ok" == id){
                    //點擊了確認要做的事情
                    alert("1:"+val);
                }else{
                    //點擊了取消要做的事情
                    alert("2:"+val);
                }
            },this,true,"張三");
        })

　　回調函數有兩個參數，第一個表示用戶點擊的按鈕（ok或cancel），第二個參數表示文本框中的輸入值

　　prompt參數說明：標題，提示信息，回調函數，作用域，是否多行文本框，文本框默認值

 

wait方法：進度條

        Ext.onReady(function () {
            Ext.Msg.wait("提示信息","內容",{
                interval: 500, //循環定時間隔，毫秒
                duration: 5000,//總時長，毫秒
                increment: 3,//執行進度條的次數
                text: 'Updating...',//進度條上的提示文字
                scope: this,
                fn: function(){
                    alert("執行完畢");
                }
            })
        })

 

show方法：自定義彈出框

        Ext.onReady(function () {
            Ext.Msg.show({
                title: 'Address',
                msg: 'Please enter your address:',
                width: 300,
                height:300,
                buttons: Ext.Msg.OKCANCEL,
                icon: Ext.window.MessageBox.INFO
            });
        })

 

主要還是看文檔