学习Extjs4 (1) 提示框 Ext.MessageBox

今天主要记录一下学习的Ext.MessageBox。

废话少说  直接上代码和效果

预备代码(javascript)：

Ext.MessageBox有个简写形式：Ext.Msg 这两种使用效果是一样的。

 1 Ext.require(["*"]);
 2         
 3 var DemoFunc = {
 4     evtAfterClick: function (btn, text) {
 5         alert("点击按键类型：" + btn);
 6         if (undefined != text && null != text) {
 7             alert("输入数据：" + text);
 8         }
 9     }
10 };

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