Ext.ux.window.Notification

[Grolubao]

Hey guys,
I love the styling that Erik and you guys did for the ux-notification-light . Unfortunately I'm still using ExtJS 3.x so the styling doesn't work. Can someone provide me the same styling but to apply to a ExtJS 3.x application?

Thanks a lot!

[justmyhobby]

This extension is good. However, it will be a problem if you create many notifications with different companions of corner and useXAsis within the same manager. It is because it uses only one list of notifcations for each manager. You can fix this problem by adding a list of notifications for each companion of corner & useXAxis. For example:

statics: {
    defaultManager: {
        notifications: {
                        tl: {
                              horizontal: [],
                              vertical: []
                        },
                        tr: {
                              horizontal: [],
                              vertical: []
                        },
                        ...........
                },
        el: null
    }
},

You also need to modify the respective code that access the list of notifications as follow:

me.manager.notifications[me.corner][me.useXAxis ? 'horizontal' : 'vertical']

[pmiguelmartins]

Can you send me the changes to use center mode

Thanks

Pedro Miguel Martins

[jmaia]

Can you send me the changes to use center mode

I did not change the Ext.ux.window.Notification component to center the message, all I did was follow Eirik's advice and set the paddingX property before showing the notification window.

So, for example, let's say I have a generic function show:

show: function (title, msg, type, time) {        
     var notificationBox = Ext.create('widget.uxNotification', {
          corner: 'tl',
          title: title,
          html: msg,
          autoDestroyDelay: time,
          slideInDelay: 500,
          slideDownDelay: 500,
          slideInAnimation: 'bounceOut',
          slideDownAnimation: 'easeIn',
          cls: 'ux-notification-light',
          width: 400
    });
                
        var centerPadding = (Ext.getBody().getViewSize().width - notificationBox.width) / 2;
        notificationBox.paddingX = centerPadding;    
        
    notificationBox.show();
}

The important bit for centering the window here are the corner: 'tl' and the lines where the centerPadding value is calculated and where I'm applying that value to the paddingX property.

Please note that, as I said on a previous post, this works for me because all my notification windows are spawned from the main browser document window and not from a child panel. If you wanted to center the notification on a child panel instead of the document window, you'd probably have to calculate the padding in a different way.

Hope that helped.

Joao Maia

[pmiguelmartins]

Thanks


Pedro Martins

[crealivres]

Hello and thank you for this great plugin!
Is anyone else getting this error in Firefox:
"dom.getBoundingClientRect is not a function"
which takes me to the line in ext-debug
rect = dom.getBoundingClientRect();

It may be related to the Notification window trying to get the browser dimensions....it is creating scrollbars on the page as well. Is anyone having problems like this?

Thank you,
Dan

same for me on chrome and firefox
dom.getBoundingClientRect is not a function

on ie, the same fx causes an error some lines above:
style = dom.style;
overflow = style.overflow;

==> resolved replace .show(document) by .show()

[crealivres]

how to fix zindex to keep notification windows on the top ?

[eirik.lorentsen]

crealivres:
I have created a alwaysOnTop controller that you can use to keep the notifications always on top.

See:
http://www.sencha.com/forum/showthre...264#post696264

Or:
http://www.eirik.net/Ext/ux/window/AlwaysOnTop.html

After you add the controller you just put alwaysOnTop: true in the notification's config or in the class definition in the Notification.js file, and then the notification will stay on top of everything else.

[basememara]

Nice work!! I hope this makes it into the framework. This is a huge head start!

[hpsam]

Thanks for this extension.

Just one thing, addClass is deprecated so use addCls in cancelAutoDestroy.

cancelAutoDestroy: function() {
         var me = this;
         me.addCls('notification-fixed');