自定义Ext 消息（自带淡入、淡出功能、提示图片）

1、惯例先看一下效果：

*上面是显示系统提示信息（自定义msg）因为是是向document.body 插入div所以可以弹出多个msg（只要你愿意可以弹出很多个）。

2、下面是自定义msg javascript代码：

/*
*title：自定义Ext msg（自带淡入、淡出功能）
*author： msj
*date：2016-09-10
*description：根据Ext官方列子改造而成，
比传统的Ext alert省却了用户点击“确定”
*update：2016-09-19
*aphorism：
活（工作）就是你的影子（Jobs is your shadow）
*/
Ext.example = function () {
    var msgCt;
    function createBox(t, s) {
        return '
' + t + '
' + s + '
';//msg div 添加图片
    }
    return {
        msg: function (title, format) {
            if (!msgCt) {
                msgCt = Ext.DomHelper.insertFirst(document.body, { id: 'msg-div' }, true);
            }
            var s = Ext.String.format.apply(String, Array.prototype.slice.call(arguments, 1));
            var m = Ext.DomHelper.append(msgCt, createBox(title, s), true);
            m.hide();
            m.slideIn('t').ghost("t", { delay: 4000, remove: true });//显示4s后淡出
        },

        init: function () {
            if (!msgCt) {
                msgCt = Ext.DomHelper.insertFirst(document.body, { id: 'msg-div' }, true);
            }
        }
    };
}();
Ext.onReady(Ext.example.init, Ext.example);

3、自定义CSS样式

/*!
 * Ext JS
 * Copyright(c) 2006-2012 Sencha Inc.
 * [email protected]
 * http://www.sencha.com/license
 */
body {
    padding:20px;
    padding-top:32px;
}
.x-body {
    font-family:helvetica,tahoma,verdana,sans-serif;
    font-size:13px;
}
p {
    margin-bottom:15px;
}
h1 {
    font-size:18px;
    margin-bottom:20px;
}
h2 {
    font-size:14px;
    color:#333;
    font-weight:bold;
    margin:10px 0;
}
.example-info{
    width:150px;
    border:1px solid #c3daf9;
    border-top:1px solid #DCEAFB;
    border-left:1px solid #DCEAFB;
    background:#ecf5fe url( info-bg.gif ) repeat-x;
    font-size:10px;
    padding:8px;
}
pre.code{
    background: #F8F8F8;
    border: 1px solid #e8e8e8;
    padding:10px;
    margin:10px;
    margin-left:0px;
    border-left:5px solid #e8e8e8;
    font-size: 12px !important;
    line-height:14px !important;
}
.msg .x-box-mc {
    font-size:14px;
}
#msg-div {
    position:absolute;
    left:50%;
    top:10px;
    width:350px;
    margin-left:-175px;
    z-index:20000;
}
#msg-div .msg {
    border-radius: 8px;
    -moz-border-radius: 8px;
    /*background: #F6F6F6;*/
    border: 1px solid #ccc;
    margin-top: 2px;
    padding: 10px 15px;
    color: #555;
    background: #fff;
    
}
#msg-div .msg .icon0{
    position:absolute;
    margin:auto;
    width:39px;
    height:39px;
    list-style-type:none;
    background:url(../Images/icons/icon.png) no-repeat;
    background-position:0 0
}
#msg-div .msg h3 {
    margin: 0 60px 8px;
    font-weight: bold;
    font-size: 15px;
    left:50px;
}
#msg-div .msg p {
    margin: 0 60px;
    left:50px;
}
.x-grid3-row-body p {
    margin:5px 5px 10px 5px !important;
}

.feature-list {
    margin-bottom: 15px;
}
.feature-list li {
    list-style: disc;
    margin-left: 17px;
    margin-bottom: 4px;
}
.layui-layer-ico{background:url(Images/icons/icon.png) no-repeat}
.layui-layer-ico1{background-position:-46px 0}
.layui-layer-ico2{background-position:-94px 0}
.layui-layer-ico3{background-position:-145px 0}
.layui-layer-ico4{background-position:-191px 0}
.layui-layer-ico5{background-position:-239px 0}
.layui-layer-ico6{background-position:-287px 0}

4、使用方法：

Ext.example.msg('系统提示', ‘操作成功！’);

5、所需资源一张图片（示例用的是第一个图）：

------------------------------------------------The End-----------------------------------------------