Extjs4의 toast 효과

2008 단어 ExtJS
Ext.toast = function(){
    var msgCt;
    function createBox(t, s){
       return '

' + t + '

' + s + '

'; } 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: 1000, remove: true}); }, init : function(){ if(!msgCt){ // It's better to create the msg-div here in order to avoid re-layouts // later that could interfere with the HtmlEditor and reset its iFrame. msgCt = Ext.DomHelper.insertFirst(document.body, {id:'msg-div'}, true); } } }; }();

호출 방법:
css 도입 필요
.msg .x-box-mc {
    font-size:14px;
}
#msg-div {
    position:absolute;
    left:50%;
    top:10px;
    width:400px;
    margin-left:-200px;
    z-index:20000;
}
#msg-div .msg {
    border-radius: 8px;
    -moz-border-radius: 8px;
    background: #F6F6F6;
    border: 2px solid #ccc;
    margin-top: 2px;
    padding: 10px 15px;
    color: #555;
}
#msg-div .msg h3 {
    margin: 0 0 8px;
    font-weight: bold;
    font-size: 15px;
}
#msg-div .msg p {
    margin: 0;
}

그리고 호출
Ext.toast.msg('Congratulations', 'Save Success!');





좋은 웹페이지 즐겨찾기