ExtJs 消息提示框介绍

来源：互联网发布：js undefend 判断编辑：程序博客网时间：2024/06/06 14: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.INFOicon: Ext.MessageBox.QUESTIONicon: 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);});

阅读全文

0 0