notification autosave

by Johan Vandeplas

HTML

<script src="http://cdn.sencha.com/ext/gpl/4.2.1/ext-all-dev.js"></script>
<link rel="stylesheet" href="http://cdn.sencha.com/ext/gpl/4.2.1/resources/css/ext-all.css">

CSS

.ceres-notification {
    top: -45px;
    position: absolute;
    z-index: 100;
    right: 110px;
    background-color: #AAFF8D;
    border: 2px solid green;
    border-radius: 5px;
    padding: 10px 20px;
    transition-duration: 200ms;
}
.ceres-notification-show {
    -webkit-transform: translateY(40px);
    -ms-transform: translateY(40px);
    transform: translateY(40px);
}
.saving {
    background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP+5AIFeAOCjAKF1AIFeALGAAMCLAMiRACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQACgABACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkEAAoAAgAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkEAAoAAwAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkEAAoABAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQACgAFACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQACgAGACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAAKAAcALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');
    background-repeat: no-repeat;
    background-position: 4px 10px;
    background-color: #FFB900;
    border-color: #815E00;
    padding-left: 25px;
}

JavaScript

Ext.create('Ext.panel.Panel', {
    layout: 'border',
    xtype: 'panel',
    title: 'Simpsons',
    height: 500,
    renderTo: Ext.getBody()
});

Ext.define('Ceres.view.ux.Notification', {
    extend: 'Ext.Component',
    alias: 'widget.notification',

    cls: 'ceres-notification saving',
    html: '',
    renderTo: Ext.getBody(),
    autoShow: true,
    autoDestroy: true,
    timeout: 2000,

    initComponent: function () {
        var me = this;

        if (Ext.isDefined(me.msg)) {
            me.html = me.msg;
        }

        if (me.autoShow) {
            me.on('afterrender', function () {
                me.show();
                Ext.defer(me.hide, me.timeout, me);
            });
        }
        me.callParent(arguments);
    },

    show: function () {
        var me = this;

        Ext.each(Ext.ComponentQuery.query('notification'), function (item) {
            if (me.id !== item.id) {
                item.hide();
            }
        });
        me.addCls('ceres-notification-show');
    },
    hide: function () {
        var me = this;
        me.removeCls('ceres-notification-show');
        if (me.autoDestroy) {
            Ext.defer(me.destroy, me.timeout + 100, me);
            if (me.callback) {
                Ext.defer(me.callback, me.timeout, me.scope || me);
            }
        }
    }
});
Ext.defer(function () {
    Ext.widget('notification', {
        autoShow: false,
        msg: 'Saving data...'
    }).show();

}, 1000);