Ext.ux.Notification

[sergio.berlotto]

Using ExtJS 3.1.1 not works fine, the shadow not disapears...

[Stju]

Don't blame, there is no shadow, but works just as intended

Ext.namespace("Ext.ux");
Ext.ux.NotificationMgr = {
positions: []
};
Ext.ux.Notification = Ext.extend(Ext.Window, {
    initComponent: function(){
        Ext.apply(this, {
            iconCls: this.iconCls || 'x-icon-information',
            cls: 'x-notification',
            width: 200,
            autoHeight: true,
            plain: false,
            draggable: false,
            shadow:false,
            bodyStyle: 'text-align:center'
        });
        if(this.autoDestroy) {
            this.task = new Ext.util.DelayedTask(this.hide, this);
        } else {
            this.closable = true;
        }
        Ext.ux.Notification.superclass.initComponent.apply(this);
    },
    setMessage: function(msg){
        this.body.update(msg);
    },
    setTitle: function(title, iconCls){
        Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
    },
    onDestroy: function(){
        Ext.ux.NotificationMgr.positions.remove(this.pos);
        Ext.ux.Notification.superclass.onDestroy.call(this);   
    },
    cancelHiding: function(){
        this.addClass('fixed');
        if(this.autoDestroy) {
            this.task.cancel();
        }
    },
    afterShow: function(){
        Ext.ux.Notification.superclass.afterShow.call(this);
        Ext.fly(this.body.dom).on('click', this.cancelHiding, this);
        if(this.autoDestroy) {
            this.task.delay(this.hideDelay || 5000);
       }
    },
    animShow: function(){
        this.pos = 0;
        while(Ext.ux.NotificationMgr.positions.indexOf(this.pos)>-1)
            this.pos++;
        Ext.ux.NotificationMgr.positions.push(this.pos);
        this.setSize(200,100);
        this.el.alignTo(document, "br-br", [ -20, -20-((this.getSize().height+10)*this.pos) ]);
        this.el.slideIn('b', {
            duration: 1,
            callback: this.afterShow,
            scope: this
        });
    },
    animHide: function(){
        this.el.ghost("b", {
            duration: 1,
            remove: false,
            callback : function () {
                Ext.ux.NotificationMgr.positions.remove(this.pos);
                this.destroy();
            }.createDelegate(this)

        });
    },
    focus: Ext.emptyFn
});

Use it without included protoculus library , save space, use mp3, not wav..

 function show_info(typeCode, titleHtml, bodyHtml){
    //type 1 - error
    //type 2 - info
    var headerIcon = (typeCode == 'error') ? 'ico-exclamation' : 'ico-info' ;
    new Ext.ux.Notification({
        iconCls: headerIcon,
        title: titleHtml,
        html: bodyHtml,
        autoDestroy: true,
        hideDelay:  1800,
        listeners: {
                'beforerender': function(){
                   Ext.ux.Sound.play('ext.ux2/Notification/notify.mp3');
                }
        }
}).show(document);
}

[MoimHossain]

Guys, this is indeed a nice work. However, when I tried to use this into my application, I find that the shadows are not removed when the notification closes (I am using autohide mode) in IE7.

I am using a layout exactly like the the Ext API documentation program (a viewport into the middle, a tab control with a first tab that renders a html page). And for the notification I am showing it as

show(document)

so, it's using the document as the host. Look at the image below.



As you can see the botton -right portion of my application, I have a status bar and the white portion is the html page inside the first tab page. And this is what happens after the notification gets hidden.

I am using all the CSS that I found into the online demo of this cool component. Still it doesn't work for me.

Can any body help me please?

[tobiu]

open your eyes MoimHossain,

thorsten already posted a fix:
http://www.sencha.com/forum/showthre...563#post424563

with kind regards
tobiu

[MoimHossain]

open your eyes MoimHossain,

thorsten already posted a fix:
http://www.sencha.com/forum/showthre...563#post424563

with kind regards
tobiu

Thanks Buddy, I just opened my eyes and got that nice fix. Thanks again for your reply Cheers

[evertonce]

tanks effatal very good job!!!

[Simonici]

Does anyone know why the toast window demo has a lighter color at the top of the window and the Notification has not. I am using Notification with Ext 3.2.
Is this a Ext.Window property?


toast_vs_Notification.gif

[jsakalos]

It's probably different sprite(s).

[tobiu]

if you mean the toast-demo at the first page of this topic, thats with ext 2.x
the css and images have changed quite a lot.

[oulenspiegel]

This is a version with my modifications. It handles such an issues:

1. Wrong y positions in the case of multiple notifications (notifications overlapping)
2. Wrong x notifications positions (at least at Chrome) when after the first notification y-scrollbar appears which results in body element resize
3. y-scrollbar appearance when using notification for the document w/o y-scrollbar.

Ext.namespace("Ext.ux");

Ext.ux.NotificationMgr = {
notifications: [],
originalBodyOverflowY: null
};

Ext.ux.Notification = Ext.extend(Ext.Window, {
    initComponent: function(){
        Ext.apply(this, {
            iconCls: this.iconCls || 'x-icon-information',
            cls: 'x-notification',
            width: 200,
            autoHeight: true,
            plain: false,
            draggable: false,
            shadow:false,
            bodyStyle: 'text-align:center'
        });
        if(this.autoDestroy) {
            this.task = new Ext.util.DelayedTask(this.hide, this);
        } else {
            this.closable = true;
        }
        Ext.ux.Notification.superclass.initComponent.apply(this);
    },
    setMessage: function(msg){
        this.body.update(msg);
    },
    setTitle: function(title, iconCls){
        Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
    },
    onDestroy: function(){
        Ext.ux.NotificationMgr.notifications.remove(this);
        Ext.ux.Notification.superclass.onDestroy.call(this);   
    },
    cancelHiding: function(){
        this.addClass('fixed');
        if(this.autoDestroy) {
            this.task.cancel();
        }
    },
    afterShow: function(){
        Ext.ux.Notification.superclass.afterShow.call(this);
        Ext.fly(this.body.dom).on('click', this.cancelHiding, this);
        if(this.autoDestroy) {
            this.task.delay(this.hideDelay || 5000);
       }
    },
    animShow: function() {
		// save original body overflowY
		if (Ext.ux.NotificationMgr.originalBodyOverflowY == null)
		{
			Ext.ux.NotificationMgr.originalBodyOverflowY = document.body.style.overflowY;
		}

		// if the body haven't horizontal scrollbar it should not appear
		if (document.body.clientHeight == document.body.scrollHeight)
		{
			document.body.style.overflowY = 'hidden';
		}
		
        this.setSize(200, 100);
        pos = -5;
		
		for (var i = 0; i < Ext.ux.NotificationMgr.notifications.length; i++)
		{
			pos -= Ext.ux.NotificationMgr.notifications[i].getSize().height + 15;
		}
		
        Ext.ux.NotificationMgr.notifications.push(this);
		
        this.el.alignTo(document.body, "br-br", [ -20, pos ]);
		
        this.el.slideIn('b', {
            duration: 1,
            callback: this.afterShow,
            scope: this
        });
    },
    animHide: function(){
        this.el.ghost("b", {
            duration: 1,
            remove: false,
            callback : function () {
                Ext.ux.NotificationMgr.notifications.remove(this);
				
				if (Ext.ux.NotificationMgr.notifications.length == 0)
				{
					document.body.style.overflowY = Ext.ux.NotificationMgr.originalBodyOverflowY;
				}
				
                this.destroy();
            }.createDelegate(this)

        });
    },
    focus: Ext.emptyFn
});