保存代码学习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: '你即将闭关一个未保存的改更。
您想保存改更吗？',
        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);
});

 

文章结束给大家分享下程序员的一些笑话语录： 问答
Q：你是怎么区分一个内向的程序员和一个外向的程序员的？ A：外向的程序员会看着你的鞋和你说话时。
Q：为什么程序员不能区分万圣节和圣诞节？ A：这是因为 Oct 31 == Dec 25！（八进制的 31==十进制的 25）