extjs4.2|ExtJs4 Ext.MessageBox 各种对话框实现代码

时间:2017-05-27  来源:extjs  阅读:
 代码如下

各种消息框









警告对话框和确认对话框
展示一个带“是”,“否”按钮的确认对话框。当单击按钮时,执行回调函数,获取按钮类型,并弹出一个警告对话框。

[Js]

 代码如下     Ext.get("bt1").on("click", function () {
        Ext.MessageBox.confirm("标题", "详细信息内容", function (btn) {
            Ext.Msg.alert("提示", "你点击了" + btn + "按钮");
        });
    });


输入对话框
展示一个带文本框的对话框,可以供用户录入。单击按钮后可以获取文本框的内容。

[Js]

 代码如下     Ext.get("bt2").on("click", function () {
        Ext.MessageBox.prompt(
        "标题",
        "详细信息内容",
        function (btn, text) {
            Ext.Msg.alert("提示", "你点击了" + btn + "按钮,获取的文本:" + text);
        },
        this,
        true,       //表示文本框为多行文本框
        "初始文本");
    });


展示一个自定义的对话框,可以定义图标样式,按钮组的类型,是否带文本框,是否带进度条等信息。

[Js] 
   

 代码如下 Ext.get("bt3").on("click", function () {
        Ext.MessageBox.show({
            title: "标题",
            msg: "详细信息内容",
            buttons: Ext.MessageBox.YESNOCANCEL,    //对话框的按钮组合
            multiline: false,                       //有文本框时,是否为多行文本框
            closable: false,                        //是否可关闭
            prompt: true,
            icon: Ext.MessageBox.WARNING,
            iconCls: "add16",
            width: 400,
            proxyDrag: true,
            value: "初始文本",
            progress: true,
            progressText: "加载中..",
            animateTarget: "bt3"
        });
    });


效果展示:


四、加载进度条对话框
展示一个带加载进度条的对话框,提示当前执行任务的进度信息。

[Js] 
   

 代码如下

Ext.get("bt4").on("click", function () {
        Ext.MessageBox.show({
            title: "加载窗口",
            msg: "详细信息内容",
            progressText: "加载中...",
            width: 300,
            progress: true,
            closable: false,
            animateTarget: "bt4"
        });

        //模拟加载环境
        var f = function (v) {
            return function () {
                if (v == 12) {
                    Ext.MessageBox.hide();
                    Ext.Msg.alert("提示", "加载完毕!");
                } else {
                    var i = v / 11;
                    Ext.MessageBox.updateProgress(i, Math.round(100 * i) + "% 完成");
                }
            };
        };
        for (var i = 1; i < 13; i++) {
            setTimeout(f(i), i * 200);
        }
    });


效果展示:


等待进度条对话框
展示等待进度条的对话框,提示用户当前正在等待某一任务执行。

[Js] 
   

 代码如下 Ext.get("bt5").on("click", function () {
        Ext.MessageBox.show({
            msg: "正在保存数据..",
            progressText: "保存中...",
            width: 300,
            wait: true,
            waitConfig: { interval: 200 },
            icon: "download",
            animateTarget: "bt5"
        });
        setTimeout(function () {
            Ext.MessageBox.hide();
            Ext.Msg.alert("提示", "保存完毕!");
        }, 3000);
    });


效果展示:


、基本的等待对话框
这里演示基本的等待对话框的实现方式。

[Js]

 代码如下
    Ext.get("bt6").on("click", function () {
        Ext.MessageBox.wait("详细信息内容", "标题", {
            interval: 100       //进度条加载速度
        });
        setTimeout(function () {
            Ext.MessageBox.hide();
            Ext.Msg.alert("提示", "完毕!");
        }, 35000);
    });


效果展示:

 

extjs4.2|ExtJs4 Ext.MessageBox 各种对话框实现代码

http://m.bbyears.com/wangyezhizuo/32946.html

推荐访问:extjs4api
相关阅读 猜你喜欢
本类排行 本类最新