Ext 消息框

转载于 2019-04-24 17:07:00 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/hpx2020/p/10763471.html

本文详细介绍了使用ExtJS框架创建各种消息框的方法，包括普通弹出框、带输入框的弹出框、自定义消息框、带有进度条的提示框以及炫酷的飞出消息框。通过实际代码示例，读者可以学习如何在Web应用中灵活运用这些消息框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第四章：Ext 消息框</title>
    <link rel="stylesheet" href="src/ext/resources/css/ext-all.css">

    <!--ext-base 必须在ext-all之前引入-->
    <script src="src/ext/ext-base.js"></script>
    <script src="src/ext/ext-all.js"></script>
    <!--<script src="src/ext/ext-lang-zh_CN.js"></script>-->
    <style>
        button{
            margin-bottom: 20px;
        }
    </style>
</head>
<body>

<button  onclick="extJsAlert()">普通弹出框</button> <br>

<button  onclick="extJsPrompt()">带输入框的弹出框</button> <br>
<button  onclick="extJsCustom()">自定义消息框</button> <br>
<button  onclick="extJsProgress()">带有进度条的提示框</button> <br>
<button id="fly" onclick="extJsAnimal()">飞出来吧</button>

<script>
    // 普通弹出框
    var extJsAlert = function () {
        Ext.MessageBox.alert('提示框', '这是一个提示框', function () {
            alert('提示框关闭了');
        });
    };

    // 带输入框的弹出框
    var extJsPrompt = function () {
        Ext.MessageBox.prompt('输入框', '请输入您的姓名：', function (btn, txt) {
            Ext.MessageBox.alert('结果', '您点击' + btn + '按钮, <br>输入的内容为' + txt);
        }, this, 300);
    };

    // 自定义消息框
    var extJsCustom = function () {
        var config = {
            title: '自定义对话框',
            msg: '这是一个自定义对话框，想怎么搞就怎么搞',
            width: 400,
            multiline: true,
            closable: true,
            buttons: Ext.MessageBox.YESNOCANCEL,
            icon: Ext.MessageBox.INFO,
            fn: function (btn, txt) {
                Ext.MessageBox.alert('结果', '您点击 yes 按钮, <br>输入的内容为' + txt);
            },
        };

        Ext.Msg.show(config);
    };

    // 带有进度条的提示框
    var extJsProgress = function () {
        Ext.Msg.show({
            title: '请等待',
            msg: '正在加载项目...',
            progerssText: '正在初始化...',
            width: 300,
            progress: true, // 此属性证明这是一个进度条
            closable: false,
        });

        var f = function (v) {
            return function () {
                if (v === 12) {
                    Ext.Msg.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 * 500);
        }
    };

    // 炫酷的弹出框
    var extJsAnimal = function () {
        var config = {
            title: '飞出来的消息框',
            msg: '这是一个自定义对话框，是飞出来的...',
            width: 400,
            multiline: true,
            closable: false,
            buttons : Ext.MessageBox.YESNOCANCEL,
            icon: Ext.Msg.QUESTION,
            animEl : 'fly'
        }
        Ext.Msg.show(config)
    }
</script>

</body>
</html>

转载于:https://www.cnblogs.com/hpx2020/p/10763471.html