ExtJs 消息提示框介绍

淩亂°似流年 2021-09-14 10:46 740阅读 0赞

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

![18111233-103ee93936e14e8ea181f8283e401255.png][]

![18111553-81a6fd0979de40058f3b21081d14004c.png][]

Ext.get('btnA1').on('click', function (e) {
        Ext.Msg.alert('alert', '点击alert键', DemoFunc.evtAfterClick);
    });

![18111813-8618ee27070d4559b1680d05ef5f74e8.png][]

Ext.get('btnA2').on('click', function (e) {
        Ext.Msg.prompt('prompt', '点击prompt键', DemoFunc.evtAfterClick);
    });

![18111839-a55aca1c407f4cccb769884c3b01786a.png][]

Ext.get('btnA3').on('click', function (e) {
        Ext.Msg.confirm('confirm', '点击confirm键', DemoFunc.evtAfterClick);
    });

二、丰富javascript自带的提示框

![18112204-f30663024d9a448b879da5a516baaddf.png][]

[![复制代码][copycode.gif]][copycode.gif 1]

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

[![复制代码][copycode.gif]][copycode.gif 1]

![18112214-67d35b05b75b4e82aa218adc80e087e9.png][]

[![复制代码][copycode.gif]][copycode.gif 1]

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
        });
    });

[![复制代码][copycode.gif]][copycode.gif 1]

三、可指定的提示框图标  
![18112220-ddbb2bdba7f94f1981c386bd4a7677f2.png][]

[![复制代码][copycode.gif]][copycode.gif 1]

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
        });
    });

[![复制代码][copycode.gif]][copycode.gif 1]

以下三个提示框的图标展示代码省略，更换上面代码中的icon即可。

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

![18112225-9d2390de0a9c47ec8fd4e13144ee7abf.png][]

![18112232-d37530ad967947d1acde0cd43d883fcc.png][]

![18112239-3e07f1cd16324cf78c85b6f2e676fc01.png][]

四、自定义按钮文字的提示框

![18112249-7e6832d8e1d04985b5099704d55a3f1d.png][]

[![复制代码][copycode.gif]][copycode.gif 1]

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
        });
    });

[![复制代码][copycode.gif]][copycode.gif 1]

五、Ext中扩展的提示框

![18112255-4a0482f2fb29441f9311b40d6b70145f.png][]

[![复制代码][copycode.gif]][copycode.gif 1]

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);
        }
    });

[![复制代码][copycode.gif]][copycode.gif 1]

![18112300-2fa338f4a61543b68fe6e8a35f54afc0.png][]

[![复制代码][copycode.gif]][copycode.gif 1]

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);
    });

[18111233-103ee93936e14e8ea181f8283e401255.png]: /images/20210726/19c56492a39e4434be1c32b425f630a8.png
[18111553-81a6fd0979de40058f3b21081d14004c.png]: /images/20210726/1e43d03bc4534b978ec2482aa5b0104f.png
[18111813-8618ee27070d4559b1680d05ef5f74e8.png]: /images/20210726/2912eb29f7e24559b9b99ea38f9a920c.png
[18111839-a55aca1c407f4cccb769884c3b01786a.png]: /images/20210726/176b3a31ddaa407ebc7941cfbb7db28b.png
[18112204-f30663024d9a448b879da5a516baaddf.png]: /images/20210726/96981f22663d4b5fb96997a71e51773d.png
[copycode.gif]: http://common.cnblogs.com/images/copycode.gif
[copycode.gif 1]: /images/20210726/66d22331592241edaaf2f2a14d000461.png
[18112214-67d35b05b75b4e82aa218adc80e087e9.png]: /images/20210726/3df73b327057418e93109ad468cc9866.png
[18112220-ddbb2bdba7f94f1981c386bd4a7677f2.png]: /images/20210726/306fa1054caa476a8832517e50f60f40.png
[18112225-9d2390de0a9c47ec8fd4e13144ee7abf.png]: /images/20210726/315841cba9b44262afb3316acfb52455.png
[18112232-d37530ad967947d1acde0cd43d883fcc.png]: /images/20210726/91c133e4cabc4a0aa5abbfa15d4a8a24.png
[18112239-3e07f1cd16324cf78c85b6f2e676fc01.png]: /images/20210726/8535654ac9b647a5894e0154db813aa2.png
[18112249-7e6832d8e1d04985b5099704d55a3f1d.png]: /images/20210726/08e5c18d38394334a0f059d21ce4b787.png
[18112255-4a0482f2fb29441f9311b40d6b70145f.png]: /images/20210726/e5aa6fd937b44ee48d66579903ffa8c8.png
[18112300-2fa338f4a61543b68fe6e8a35f54afc0.png]: /images/20210726/0c37ffce6d734451932f78505bf44ecb.png