Extjs学习笔记（消息框）

　　一　　提示框

　　语法：Ext.Msg.alert(String title, String msg, Function fn, Object scope);

　　参数：

　　　　title:标题

　　　　msg:提示内容

　　　　fn:提示框关闭后自动调用的回调函数

　　　　scope:作用域，用于指定this指向哪里，一般不用

　　例子：

        //提示框
        popMsgBox = function () {
            Ext.MessageBox.alert("提示框", "这是一个提示框", function () {
                alert("提示框要关闭了！");
            });
        };

　　二　　输入框

　　语法：Ext.Msg.prompt(String title, String msg, Function fn, Object scope, Boolean/Number multiline);

　　参数：

　　　　title:标题

　　　　msg:消息框内容

　　　　fn:消息框关闭后自动调用的回调函数

　　　　scope:作用域，用于指定this指向哪里，一般不用

　　　　multiline:如果为true或为数字，将允许输入多选或者指定默认高度（像素），反之不能多行

　　例子：

        //单行输入框
        inputMsgBox1 = function () {
            Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) {
                Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt);
            });
        };

        //多行输入框
        inputMsgBox2 = function () {
            Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) {
                Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt);
            }, this, 300);
        };

　　三　　确认框

　　语法：Ext.Msg.confirm(String title, String msg, Function fn, Object scope);

　　参数：

　　　　title:标题

　　　　msg:内容

　　　　fn:消息框关闭后自动调用的回调函数

　　　　scope:作用域，用于指定this指向哪里，一般不用

　　例子：

        //确认框
        confirmMsgBox = function () {
            Ext.Msg.confirm("确认框", "请点击下面的按键做出选择", function (btn) {
                Ext.Msg.alert("您点击的按钮是： " + btn);
            });
        };

　　四　　自定义消息框

　　语法：Ext.Msg.show(Object config);

　　参数：config中常见属性如下：

　　　　title:标题

　　　　msg:消息内容

　　　　消息框宽度

　　　　multiline:是否显示多行

　　　　closable:是否显示关闭按钮

　　　　buttons:按钮

　　　　icons:图标

　　　　fn:回调函数

　　　　其中：

　　　　　　buttons的取值如下：

　　　　　　　　OK:只有”确定“按钮

　　　　　　　　CANCEL:只有”取消“按钮

　　　　　　　　OKCANCEL:有”确定“和”取消“按钮

　　　　　　　　YESNO:有”是“和”否“按钮

　　　　　　　　YESNOCANCEL:有”是“、”否“和”取消“按钮

　　　　　　icons的取值如下：

　　　　　　　　INFO:信息图标

　　　　　　　　WARNING:警告图标

　　　　　　　　QUESTION:询问图标

　　　　　　　　ERROR:错误图标

　　例子：

        //自定义消息框
        customMsgBox = function () {
            var config = {
                title: "自定义消息框",
                msg: "这是一个自定义消息框",
                 300,
                multiline: true,
                closable: true, //是否显示关闭按钮
                buttons: Ext.Msg.YESNOCANCEL,
                icon: Ext.Msg.Info,
                fn: function (btn, txt) { alert("你点击的按键是： " + btn + " 你输入的内容是： " + txt); }
            };
            Ext.Msg.show(config);
        };

　　五　　进度条对话框

　　其实就是一个自定义的消息框。

　　例子：

        //进度条对话框
        progressMsgBox = function () {
            Ext.Msg.show({
                title: "请稍后",
                msg: "正在加载...",
                progressText: "正在初始化...",
                 300,
                progress: true,
                closable: false
            });

            var fun = function (v) {
                return function () {
                    if (v == 12) {
                        Ext.Msg.hide();
                        Ext.Msg.alert("完成", "所有项目加载完成");
                    } else {
                        var i = v / 11;
                        Ext.Msg.updateProgress(i, "已加载" + Math.round(100 * i) + "%");
                    };
                };
            };
            for (var i = 1; i < 13; i++) {
                setTimeout(fun(i), i * 100);
            }
        };

　　六　　飞出来的消息框

　　例子如下：

        //飞出来的消息框
        animalMsgBox = function () {
            var config = {
                title: "飞出来的消息框",
                msg: "这是一个飞出来的消息框",
                 300,
                multiline: false,
                closable: false,
                buttons: Ext.Msg.YESNOCANCEL,
                icon: Ext.Msg.QUESTION,
                animEl: "btnProgressMsgBox"
            };

            Ext.Msg.show(config);
        };

　　设置animEl，该选项指定一个标签，消息框从该标签处飞出，关闭后又买回标签。（但我利用Extjs.4.07没有看到效果，所说利用Extjs.2.XX可以看到效果，没有实验）。

　　七　　整体代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>消息框</title>   
    <link href="ext-4.0.7-gpl/resources/css/ext-all.css" rel="Stylesheet" type="text/css" />
    <script type="text/javascript" src="ext-4.0.7-gpl/ext-all.js"></script>
    <script type="text/javascript">
        Ext.onReady(function () {
            //Ext.Msg.alert("提示框", "这是一个提示框");
        });

        //提示框
        popMsgBox = function () {
            Ext.MessageBox.alert("提示框", "这是一个提示框", function () {
                alert("提示框要关闭了！");
            });
        };

        //单行输入框
        inputMsgBox1 = function () {
            Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) {
                Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt);
            });
        };

        //多行输入框
        inputMsgBox2 = function () {
            Ext.Msg.prompt("输入框", "请输入您的姓名： ", function (btn, txt) {
                Ext.Msg.alert("结果", "您点击了" + btn + "按钮，<br>输入的内容为" + txt);
            }, this, 300);
        };

        //确认框
        confirmMsgBox = function () {
            Ext.Msg.confirm("确认框", "请点击下面的按键做出选择", function (btn) {
                Ext.Msg.alert("您点击的按钮是： " + btn);
            });
        };

        //自定义消息框
        customMsgBox = function () {
            var config = {
                title: "自定义消息框",
                msg: "这是一个自定义消息框",
                 300,
                multiline: true,
                closable: true, //是否显示关闭按钮
                buttons: Ext.Msg.YESNOCANCEL,
                icon: Ext.Msg.Info,
                fn: function (btn, txt) { alert("你点击的按键是： " + btn + " 你输入的内容是： " + txt); }
            };
            Ext.Msg.show(config);
        };

        //进度条对话框
        progressMsgBox = function () {
            Ext.Msg.show({
                title: "请稍后",
                msg: "正在加载...",
                progressText: "正在初始化...",
                 300,
                progress: true,
                closable: false
            });

            var fun = function (v) {
                return function () {
                    if (v == 12) {
                        Ext.Msg.hide();
                        Ext.Msg.alert("完成", "所有项目加载完成");
                    } else {
                        var i = v / 11;
                        Ext.Msg.updateProgress(i, "已加载" + Math.round(100 * i) + "%");
                    };
                };
            };
            for (var i = 1; i < 13; i++) {
                setTimeout(fun(i), i * 100);
            }
        };

        //飞出来的消息框
        animalMsgBox = function () {
            var config = {
                title: "飞出来的消息框",
                msg: "这是一个飞出来的消息框",
                 300,
                multiline: false,
                closable: false,
                buttons: Ext.Msg.YESNOCANCEL,
                icon: Ext.Msg.QUESTION,
                animEl: "btnProgressMsgBox"
            };

            Ext.Msg.show(config);
        };
    </script>
</head>
<body>
    <input type="button" id="btnPopMsgBox" value="提示框" onclick="popMsgBox();" />
    <input type="button" id="btnInputMsgBox1" value="单行输入框" onclick="inputMsgBox1();" />
    <input type="button" id="btnInputMsgBox2" value="多行输入框" onclick="inputMsgBox2();" />
    <input type="button" id="btnComfirmMsgBox" value="确认框" onclick="confirmMsgBox();" />
    <input type="button" id="btnCustomMsgBox" value="自定义消息框" onclick="customMsgBox();" />
    <input type="button" id="btnProgressMsgBox " value="进度条对话框" onclick="progressMsgBox ();" />
    <input type="button" id="btnAnimalMsgBox" value="飞出来的消息框" onclick="animalMsgBox ();" />
</body>
</html>
打开查看

　　　　

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/danshui/p/3087490.html