<!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>

　　

Ext 消息框的更多相关文章

  1. 基于.Net实现前端对话框和消息框

    关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局等等一些本可以使用插件的.好了,废话不 ...

  2. [Phonegap+Sencha Touch] 移动开发19 某些安卓手机上弹出消息框 点击后不消失的解决的方法

    Ext.Msg.alert等弹出框在某些安卓手机上,点击确定后不消失. 原因是: 消息框点击确定后有一段css3 transform动画,动画完毕后才会隐藏(display:none). 有些奇葩手机 ...

  3. 一步步开发自己的博客 .NET版（10、前端对话框和消息框的实现）

    关于前端对话框.消息框的优秀插件多不胜数.造轮子是为了更好的使用轮子,并不是说自己造的轮子肯定好.所以,这个博客系统基本上都是自己实现的,包括日志记录.响应式布局.评论功能等等一些本可以使用插件的.好 ...

  4. WPF弹出带蒙板的消息框

    效果图 思路 拿到父级窗体的内容,放入一个容器里,再在容器里放入一个半透明层.将整个容器赋给父级窗体的内容. 关闭时反向操作. 代码 消息窗弹出时 /// <summary> /// 弹出 ...

  5. JavaScript (If...Else和Switch和循环遍历) 语句以及常用消息框

    If...Else 语句 JavaScript中if...else语句和Java中的语法和使用方法是一样的. 只是在JavaScript中要使用小写字母.使用大写的 IF 会出错! 至于if...el ...

  6. 【C#】分享一个可携带附加消息的增强消息框MessageBoxEx

    --------------201507160917更新--------------- 无意中发现标准消息框在Windows7是有声音的,只是在Windows server 2008(R2)无声,而我 ...

  7. JavaScript 消息框+特殊字符

    JavaScript 中创建三种消息框:警告框.确认框.提示框: 1.警告框: 警告框经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作 语法:alert(&qu ...

  8. WPF自定义控件与样式(13)-自定义窗体Window & 自适应内容大小消息框MessageBox

    一．前言 申明:WPF自定义控件与样式是一个系列文章,前后是有些关联的,但大多是按照由简到繁的顺序逐步发布的等,若有不明白的地方可以参考本系列前面的文章,文末附有部分文章链接. 本文主要内容: 自定义 ...

  9. jQuery动态提示消息框效果

    效果预览:http://keleyi.com/keleyi/phtml/jqtexiao/2.htm 原文:http://keleyi.com/a/bjac/hxv86dyi.htm <!DOC ...

随机推荐

  1. paper 140:TLD视觉跟踪算法(超棒)

    我是看了这样的一个视频:http://www.56.com/u83/v_NTk3Mzc1NTI.html 然后在准备针对TLD视觉跟踪算法来个小的总结. 以下博文转自:http://blog.csdn ...

  2. Node.js环境下通过Express创建Web项目

    通过Express命令创建项目 Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具. 使用 Express ...

  3. 20175203 2018-2019-2《Java程序设计》第五周学习总结

    20175203 2018-2019-2<Java程序设计>第五周学习总结 第六章:接口与实现 本周学习了<Java程序设计>第六章的内容:接口与实现,以下为本周学习总结. 知 ...

  4. 2018-2019-2 20175223 实验三《敏捷开发与XP实践》实验报告

    目录 北京电子科技学院(BESTI)实验报告 实验名称:实验三 敏捷开发与XP实践 实验内容.步骤与体会: 一.实验三 敏捷开发与XP实践-1 二.实验三 敏捷开发与XP实践-2 三.实验三 敏捷开发 ...

  5. 51、tf-idf值提取关键词

    import testWord2vec2 as tw import tensorflow_util as tu import numpy as np model = tw.load_model() n ...

  6. bash arithmatic

    Arithmetic in bash is done with $ and double parentheses: echo "$(($num1+$num2))" Or $ and ...

  7. 将excle表中得数据生成insert语句插入到数据库中

    第一步:输入公式 第二步:拽住右下角得+往下拖拽

  8. nginx 配置反向代理和静态资源

    https://unit.nginx.org/integration/ 与NGINX集成 在NGINX后面安装单元 将NGINX配置为静态Web服务器,并在Unit前面配置反向代理. NGINX直接从 ...

  9. Visual Studio 2013创建并运行Cocos2d-x工程

    |   版权声明:本文为博主原创文章,未经博主允许不得转载. 1.准备: 我们得先把Visual Studio 2013安装好:可以去MSDN官网下载,在安装好 2.安装好vs之后,在cmd(终端)创 ...

  10. VS2008中编译运行MFC应用程序时，出现无法启动程序,因为计算机中丢失mfc90ud.dll的解决方案

     解决方法:"工具"->"选项"->"项目和解决方案"->"VC++目录",在可执行文件栏中加上如 ...