學習Extjs4 (1) 提示框 Ext.MessageBox

今天主要記錄一下學習的Ext.MessageBox。

廢話少說  直接上代碼和效果

預備代碼(javascript)：

Ext.MessageBox有個簡寫形式：Ext.Msg 這兩種使用效果是一樣的。

Ext.require(["*"]);
        
var DemoFunc = {
    evtAfterClick: function (btn, text) {
        alert("點擊按鍵類型：" + btn);
        if (undefined != text && null != text) {
            alert("輸入數據：" + text);
        }
    }
};

一、javascript中的提示框在Ext.MessageBox中的展現

Ext.get('btnA1').on('click', function (e) {
    Ext.Msg.alert('alert', '點擊alert鍵', DemoFunc.evtAfterClick);
});

Ext.get('btnA2').on('click', function (e) {
    Ext.Msg.prompt('prompt', '點擊prompt鍵', DemoFunc.evtAfterClick);
});

Ext.get('btnA3').on('click', function (e) {
    Ext.Msg.confirm('confirm', '點擊confirm鍵', DemoFunc.evtAfterClick);
});

 二、豐富javascript自帶的提示框

Ext.get('btnB1').on('click', function (e) {
    Ext.MessageBox.show({
        title: '更新地址信息',
        msg: '請輸入您的地址：',
        width: 300,
        buttons: Ext.MessageBox.OKCANCEL,
        multiline: true,
        fn: DemoFunc.evtAfterClick
    });
});

 

Ext.get('btnB2').on('click', function (e) {
    Ext.MessageBox.show({
        title: '標准3鍵提示框（Yes/No/Cancel）',
        msg: '你即將關閉一個未保存的更改。<br />您想保存更改嗎？',
        width: 300,
        buttons: Ext.MessageBox.YESNOCANCEL,
        fn: DemoFunc.evtAfterClick,
        icon: Ext.MessageBox.QUESTION
    });
});

三、可指定的提示框圖標

Ext.get('btnC1').on('click', function (e) {
    Ext.MessageBox.show({
        title: 'Icon Support',
        msg: 'Error',
        buttons: Ext.MessageBox.OK,
        fn: DemoFunc.evtAfterClick,
        icon: Ext.MessageBox.ERROR
    });
});

以下三個提示框的圖標展示代碼省略，更換上面代碼中的icon即可。

icon: Ext.MessageBox.INFO
icon: Ext.MessageBox.QUESTION
icon: Ext.MessageBox.WARNING

 

四、自定義按鈕文字的提示框

Ext.get('btnD1').on('click', function (e) {
    Ext.MessageBox.show({
        title: 'What, really?',
        msg: 'Are you sure?',
        buttons: Ext.MessageBox.YESNO,
        buttonText: {
            yes: "好的",
            no: "算了吧"
        },
        fn: DemoFunc.evtAfterClick
    });
});

五、Ext中擴展的提示框

Ext.get('btnE1').on('click', function (e) {
    Ext.MessageBox.show({
        title: '請稍后',
        msg: '數據加載中……',
        progressText: '數據加載中……',
        width: 300,
        progress: true,
        closable: false,
    });

    var f = function (v) {
        return function () {
            if (v == 12) {
                Ext.MessageBox.hide();
                Ext.example.msg('加載成功', '數據加載成功！');
            } else {
                var k = v / 11;
                Ext.MessageBox.updateProgress(k, "已加載 " + Math.round(100 * k) + '%');
            }
        };
    };
    for (var i = 1; i < 13; i++) {
        setTimeout(f(i), i * 500);
    }
});

Ext.get('btnE2').on('click', function (e) {
    Ext.MessageBox.show({
        msg: '正在保存數據，請稍后……',
        progressText: '保存中...',
        width: 300,
        wait: true,
        waitConfig: { interval: 200 },
        icon: 'ext-mb-download'
    });
    setTimeout(function () {
        Ext.MessageBox.hide();
        Ext.example.msg('保存成功', '您的數據已經保存成功！');
    }, 2000);
});