FadeIn/FadeOut panel for user feedback

[jnfrancois]

Hi,

what I would like is to have a panel that fadeIn/fadeOut at the top of the screen to give the user some feedback (completion, saved, loading, ..). I know I could use a status bar but I'd rather like something that catch the eye a little more.

Thank you

[scottmartin]

Have a look at this example:
http://dev.sencha.com/deploy/ext-4.1...formpanel.html

Scott.

[jnfrancois]

From the examples .... the result is great

Ext.evFeedback = function(){
    var msgCt;


    function createBox(t, s){
       return '<div class="msg"><h3>' + t + '</h3><p>' + s + '</p></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: 1300, remove: true});
        },


        init : function(){
        }
    };
}();

and then call it everywhere in my app like so

Ext.evFeedback.msg('Title', 'Texte');

Also used and modify the css from the examples

.msg .x-box-mc {
    font-size:14px;
}
#msg-div {
    position:absolute;
    left:35%;
    top:10px;
    width:300px;
    z-index:20000;
}
#msg-div .msg {
    border-radius: 8px;
    -moz-border-radius: 8px;
    background: #e1eed0;
    border: 2px solid #96b695;
    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;
}
.x-grid3-row-body p {
    margin:5px 5px 10px 5px !important;
}

Hopefully it can help someone else !

[scottmartin]

Very nice .. thanks for the followup. You may also be interested in this extension as well:
http://www.sencha.com/forum/showthread.php?145503
http://www.eirik.net/Ext/ux/window/Notification.html

Scott.

[jnfrancois]

That's a very good extension.... but GPL ;-)

Thanks anyway

[hdave]

That's a very good extension.... but GPL ;-)

Thanks anyway

It's dual licensed and the other license is MIT which is permissive, so embedding it in your proprietary system should not be a problem.