1. #1
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    jnfrancois is on a distinguished road

      0  

    Default Answered: FadeIn/FadeOut panel for user feedback

    Answered: FadeIn/FadeOut panel for user feedback


    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

  2. From the examples .... the result is great

    Code:
    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

    Code:
    Ext.evFeedback.msg('Title', 'Texte');
    Also used and modify the css from the examples

    Code:
    .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 !

  3. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,084
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Scott.

  4. #3
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    jnfrancois is on a distinguished road

      0  

    Default Found it !

    Found it !


    From the examples .... the result is great

    Code:
    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

    Code:
    Ext.evFeedback.msg('Title', 'Texte');
    Also used and modify the css from the examples

    Code:
    .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 !

  5. #4
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,084
    Answers
    675
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    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.

  6. #5
    Sencha Premium Member
    Join Date
    Aug 2012
    Posts
    6
    Answers
    1
    Vote Rating
    0
    jnfrancois is on a distinguished road

      0  

    Default


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

    Thanks anyway

  7. #6
    Sencha User
    Join Date
    Jul 2010
    Posts
    50
    Answers
    1
    Vote Rating
    -1
    hdave is an unknown quantity at this point

      0  

    Default


    Quote Originally Posted by jnfrancois View Post
    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.

Thread Participants: 2

Tags for this Thread