Ext.ux.Notification

[Bodom78]

Thanks oulenspiegel,

I'm about to use notifications in another project and will test out your modified version to see if there are any issues.

[nmcbride]

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
});

The problem with this is that if you are on a page with a vertical scroll bar, when the notification pops up it removes it so the whole page shifts to the right which is very noticeable.

[HarryC]

I'm not sure what I'm doing wrong with this plugin, but whenever I use it I get multiple notifications. Say I have a button that when pressed shows a notification. It works the first time, but when you press it a second time you get 2 notifications. A third time, 3; and so on. It looks bad and gets slow.

Anyone else have this and know what I'm doing wrong?

(I'm using Ext 3.3.1, but I've always had this issue with the plugin. Basically stopped using it months ago because of this, but now I really would like to use it).

[white-hat]

Good evening,

i started using Ext4 a few weeks before and today i tried to play around with notifications.
If i start it i receive an error (IE):


Meldung: Objekt expected
Zeile: 31
Zeichen: 10
Code: 0
URI: xyz.de/extComm/webDesk/sandbox/sandbox.js



Ext4.onReady(function() {


var viewport = new Ext.Viewport({
layout: 'border',
items: [
{
region: 'center',
title: 'Toast Windows',
items: [
{
xtype: 'button',
text: 'Eject new toast window',
style: 'margin: 20px',
listeners: {
click: function(){
---> Thats line 31 new Ext.ux.Notification({


...





I have included
protoculous-packer.js
Ext.ux.Notification.js

so i dont think thats the issue.
Did i forget something?

Sorry for my silly questions but i tried to fix the whole day.

Best regards from germany
Bo

[talha06]

very useful plugin, thanks for sharing dear friend.. I just want to learn how can I solve "spot" problem after the window is hidden.. the spot that's around of the window stays.. By the way I'm using Ext 3.x.. Can someone help me? I attached the pic of this situation..

Thanks in advance..
With regards..
1.png2.png

[eirik.lorentsen]

I have ported / rewritten a 4.x version of this extension that can be found here:
http://www.sencha.com/forum/showthread.php?t=145503

I placed it in the Ext.ux.window.Notification namespace.
And it has some improvements from the old version:

• Multiple managers and notifications stacks
  The static manager object is eliminated completely, allowing notifications to attach to different components using their x and y coordinates to slide in the notifications.
• All four corners of document/manager can be used: 'br', 'bl', 'tr', 'tl'.
• Both x and y axis can be used. Notifications can slide in sideways.
• When a notification is destroyed any notifications above it slide down automatically.
• Easy customization of css, animations, delays, spacings/padding etc.

[Marc.Ziman]

I'm using Ext 3.3.1. When the notification starts to hide, its sides disappear though the corners are intact. This happens on IE8, my target browser a choice over which I have no control. Firefox is ok. Does anyone have any suggestions? Thanks.

[Grolubao]

Hi Erik,
Love the styling that you did. I tried to apply it to a normal window and it doesn't work properly... Can you provide me the styling that you used to be applied instead to ExtJS 3.x

.ux-notification-light .x-window-header { background-color: transparent;}body .ux-notification-light { background-color: white; background-image: url('images/fader.png');}.ux-notification-light .x-window-body { text-align: center; padding: 15px 5px 18px 5px; width: 200px; background-color: transparent; border: 0px solid white;}

I have ported / rewritten a 4.x version of this extension that can be found here:
http://www.sencha.com/forum/showthread.php?t=145503

I placed it in the Ext.ux.window.Notification namespace.
And it has some improvements from the old version:

• Multiple managers and notifications stacks
  The static manager object is eliminated completely, allowing notifications to attach to different components using their x and y coordinates to slide in the notifications.
• All four corners of document/manager can be used: 'br', 'bl', 'tr', 'tl'.
• Both x and y axis can be used. Notifications can slide in sideways.
• When a notification is destroyed any notifications above it slide down automatically.
• Easy customization of css, animations, delays, spacings/padding etc.

[eirik.lorentsen]

Grolubao:
I'm sorry but I haven't applied the styling to any 3.x code.
But if you set the config of the window to:
border: false,
preventHeader: true
and add a cls where you use the fader image as background then you should be well on your way.
Especially if you don't care about older (<IE9) browsers.

[gurunath]

hi all I tried this code on 4.1 but dont know how mywindow displays at centre please help me out,
one more thing when animShow method is called?
I puted an alert but it never displays