extjs 4.2 教程 - 03 - 对话框之Ext.MessageBox - 2018
原创    xingfu2017    发表于:2018-01-05 16:27:40
  阅读 :91   收藏   编辑

上一节:extjs 4.2 教程 - 02 - Ext.onReady()及Ext.get()函数 - 2018

在应用管理系统中,一个友好美观的提示可以给使用人员带来很多的提示、警示效果,
在ext中,提示效果一般大都有“Ext.MessageBox”或“Ext.Msg”来实现,本小节将以实例的方式为大家介绍在开发过程中比较常用的提示框。

警示对话框

  • 类似于js中的alert,我们在第一节已经用过了,

代码片段

Ext.Msg.alert("信息", "Hello Extjs4.2");

Ext.MessageBox.alert("信息", "Hello Extjs4.2");

运行效果如下

确认对话框

  • 类似于js中的confirm,下面展示一个带“是”,“否”按钮的确认对话框,

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all.js" ></script>
    <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function(){
                Ext.get('bt1').on('click',function(){
                    Ext.Msg.confirm("标题", "内容", function (type) {
                        Ext.Msg.alert("提示", "你点击了" + type + "按钮");
                    });
                })

        })
    </script>
    </head>
    <body>
        <button id="bt1" type="button" >Confirm</button>
    </body>
</html>

运行效果如下

输入对话框

  • 类似于js中的prompt()函数,

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <script type="text/javascript" src="extjs/ext-all.js" ></script>
    <script type="text/javascript" src="extjs/locale/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function(){
                Ext.get('bt2').on('click',function(){
                    Ext.Msg.prompt("信息","请输入输入您的名字",function(type,text){
                           Ext.Msg.alert("提示", "你点击了" + type + "按钮.您输入的名字是:" + text);
                    })
                })
        })
    </script>
    </head>
    <body>

        <button id="bt2" type="button" >Prompt</button>
    </body>
</html>

运行效果如下

未完待续

tip: Ext.MessageBox 等价于 Ext.Msg

评论
条评论