Extjs之自动消失提示框（Ext.example.msg）

约定不等于承诺〃 2022-08-24 14:23 361阅读 0赞

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
     <head>
      <title>test.html</title>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">
      <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
      <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
      <style>
    body {
     font-family: helvetica, tahoma, verdana, sans-serif;
     padding: 20px;
     padding-top: 32px;
     font-size: 13px;
     background-color: #fff !important;
    }
    </style>
      <script type="text/javascript">
    /**
     * Extjs消息提示框
     * MsgTip.msg('消息标题', '消息内容');//不自动隐藏
     * MsgTip.msg('消息标题', '消息内容',true);//默认1秒后自动隐藏
     * MsgTip.msg('消息标题', '消息内容',true,10);//3秒后自动隐藏
     */
    MsgTip = function(){
        var msgCt;
        function createBox(t, s){
            return ['<div class="msg">',
                    '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',
                    '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="font-size=12px;"><h3>', t, '</h3>', s, '</div></div></div>',
                    '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',
                    '</div>'].join('');
        }
        return {
            msg : function(title, message,autoHide,pauseTime){
                if(!msgCt){
                    msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div22',style:'position:absolute;top:10px;width:300px;margin:0 auto;z-index:20000;'}, true);
                }
                msgCt.alignTo(document, 't-t');
                //给消息框右下角增加一个关闭按钮
                message+='<br><span style="text-align:right;font-size:12px; width:100%;">' +
                  '<font color="blank"><u style="cursor:hand;" οnclick="MsgTip.hide(this);">关闭</u></font></span>'
                var m = Ext.DomHelper.append(msgCt, {html:createBox(title, message)}, true);
                m.slideIn('t');
                if(!Ext.isEmpty(autoHide)&&autoHide==true){
                 if(Ext.isEmpty(pauseTime)){
                  pauseTime=1000;
                 }
                 m.pause(pauseTime).ghost("tr", {remove:true});
                }
            },
            hide:function(v){
             var msg=Ext.get(v.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);
             msg.ghost("tr", {remove:true});
            }
        };
    }();
    Ext.onReady(function(){
     Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif';
     Ext.QuickTips.init();
     
     var btn=new Ext.Button({
      text:'不自动隐藏',
      width:80,
      renderTo:Ext.getBody(),
      handler:function(){
        MsgTip.msg('消息', '消息内容');
      }
     });
     
     var btn2=new Ext.Button({
      text:'自动隐藏',
      width:80,
      renderTo:Ext.getBody(),
      handler:function(){
        MsgTip.msg('消息', '使用默认值1秒自动隐藏',true);
      }
     });
     
     var btn3=new Ext.Button({
      text:'设置自动隐藏时间',
      width:80,
      renderTo:Ext.getBody(),
      handler:function(){
        MsgTip.msg('消息', '设置3秒后自动隐藏',true,3000);
      }
     });
    });   
    </script>
     </head>
    
     <body>
     </body>
    </html>

Ext.AutoHide = function(){  
        var msgCt;  
        function createBox(t, s){  
            return ['<div class="msg">',  
                    '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',  
                    '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc" style="font-size=12px;"><h3>', t, '</h3>', s, '</div></div></div>',  
                    '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',  
                    '</div>'].join('');  
        }  
        return {  
            msg : function(title, format){
                if(!msgCt){  
                    msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div22',style:'position:absolute;top:10px;width:300px;margin:0 auto;z-index:20000;'}, true);  
                }  
                msgCt.alignTo(document, 't-t');
                var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));
                var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);
                m.slideIn('t').pause(1).ghost("t", {remove:true});
            },
            hide:function(v)
            {  
                var msg = Ext.get(v.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement);  
                msg.ghost("tr", {remove:true});  
            }  
        };  
    }();