为Ext.Msg添加一个ghost提示的方法

总觉得的老用alert的方式打断用户操作是非常不好的做法，调用方法时这个提示会出现两秒，之后自动消失，稍做修改

Js代码

1. /**  
2.  * 存放自定义的单例函数  
3.  * @author chemzqm@gmail.com  
4.  */  
5. Ext.MyApp = function(){   
6.     var msgCt;   
7.        
8.     function createBox(t, s){   
9.         return ['<div class="msg">',    
10.         '<div class="x-box-tl"><div class="x-box-tr"><div class="x-box-tc"></div></div></div>',    
11.         '<div class="x-box-ml"><div class="x-box-mr"><div class="x-box-mc"><h3>', t, '</h3>', s,    
12.         '</div></div></div>', '<div class="x-box-bl"><div class="x-box-br"><div class="x-box-bc"></div></div></div>',    
13.         '</div>'].join('');   
14.     }   
15.     return {   
16.         ghost : function(title, format){   
17.             if(!msgCt){   
18.                 msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);   
19.             }   
20.             msgCt.center();   
21.             var s = String.format.apply(String, Array.prototype.slice.call(arguments, 1));   
22.             var m = Ext.DomHelper.append(msgCt, {html:createBox(title, s)}, true);   
23.             m.slideIn('t').highlight().pause(2).ghost("t", {remove:true});   
24.         }   
25.     };   
26. }();   
27. Ext.Msg.ghost=Ext.MyApp.ghost;  

/**
 * 存放自定义的单例函数
 * @author chemzqm@gmail.com
 */
Ext.MyApp = 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"><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 {
		ghost : function(title, format){
            if(!msgCt){
                msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true);
            }
            msgCt.center();
            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').highlight().pause(2).ghost("t", {remove:true});
        }
	};
}();
Ext.Msg.ghost=Ext.MyApp.ghost;

 

Css代码

1. #msg-div {   
2.     position: absolute;   
3.     left: 35%;   
4.     top: 10px;   
5.     width: 250px;   
6.     z-index: 20000;   
7. }   
8.   
9. .msg .x-box-mc {   
10.     font-size: 14px;   
11. }