Ext.MessageBox

最新推荐文章于 2021-05-19 21:05:41 发布

最新推荐文章于 2021-05-19 21:05:41 发布 · 62 阅读

文章标签：

#EXT #JavaScript #CSS #HTML #ViewUI

本文详细介绍了ExtJS中MessageBox的各种用法及配置选项，包括提示框、确认框和输入框等不同场景的应用，并提供了丰富的示例代码。

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

<%@ page contentType="text/html;charset=UTF-8"%>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>onReady</title>
        <link rel="stylesheet" type="text/css"
            href="/ext/resources/css/ext-all.css" />
        <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="/ext/ext-all.js"></script>
        <script type="text/javascript">
            function myAlert()
            {
                //alert(title, msg ,function(){})
                //其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发。
                 Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出！")});
            }
            function myConfirm()
            {
                //clickValue是点击后返回的值
                Ext.MessageBox.confirm("title","msg",function(clickValue){alert(clickValue);});
            }
            function myPrompt()
            {
                //true为多行，this表示作用域
                Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text);},this,true);
            }
            function myShow()
            {
                Ext.MessageBox.show({
                    title:"标题",
                    msg:"内容的消息",
                    buttons:{"ok":"我不再显示OK了"},
                    fn:function(e){alert(e);},
                    animEl:"test1",
                     width:500,
                    icon:Ext.MessageBox.INFO,
                    closable:false,
                    progress:true,
                    wait:true,
                    progressText:"进度条"
                       //prompt:true
                       //multiline:true
                });
            }
            Ext.onReady(myShow);

         </script>
    </head>
    <body style="font:10px;color:red;">
        <div id="test1">Ext.MessageBox.show</div>
        <div>
        1.animEl:对话框弹出和关闭时的动画效果，比如设置为“id1”，则从id1处弹出并产生动画，收缩则相反<br/>
        2.buttons:弹出框按钮的设置，主要有以下几种：Ext.Msg.OK,Ext.Msg.OKCANCEL,Ext.Msg.CANCEL,Ext.Msg.YESNO,Ext.Msg.YESNOCANCEL,你也可以自定义按钮上面的字：{"ok","我本来是ok的"}。若设为false，则不显示任何按钮.<br/>
        3.closable:如果为false，则不显示右上角的小叉叉，默认为true。<br/>
        4.msg:"消息的内容"<br/>
        5.title:"标题"<br/>
        6.fn:关闭弹出框后执行的函数<br/>
        7.icon：弹出框内容前面的图标，取值为Ext.MessageBox.INFO，Ext.MessageBox.ERROR,Ext.MessageBox.WARNING,Ext.MessageBox.QUESTION<br/>
        8.width:弹出框的宽度，不带单位<br/>
        9.prompt：设为true，则弹出框带有输入框<br/>
        10.multiline：设为true，则弹出框带有多行输入框<br/>
        11.progress:设为true，显示进度条，（但是是死的）<br/>
        12.progressText:显示在进度条上的字<br/>
        13.wait：设为true，动态显示progress<br/>
        14.waitConfig:配置参数，以控制显示progress<br/>
        </div>
    </body>
</html>