Ext JS: Nonblocking Notifications (Steam-style)

Permanent Link: Ext JS: Nonblocking Notifications (Steam-style) 17. November 2010 RSS Feed for comments on RSS-Feed für Kommentare zu: Ext JS: Nonblocking Notifications (Steam-style) comments feed

If you want to notify the user about something in Ext.JS, you do only have the MessageBox (at least I don't know any other possibility). The only disadvantage of MessageBox is that it's in front of any other element and usually has to be clicked away manually. Since we wanted to notify our users of things without them having to click away the notification and without it blocking the rest of the application, I wrote a Notification Extension which allows you to easily create Notifications on the bottom right of the browser window. The notifications look like this:

A single notification in application context

To be able to create those notifications, you need to add some CSS first:

.ux-chip-notification {
position: absolute;
right: 10px;
bottom: 10px;
background: #CEDFF5;
z-index: 1001;
border: 1px solid #99BBE8;
}

Second you need to add 2 JavaScript files for the 2 components Ext.ux.Chip.Notification and Ext.ux.Chip.NotificationMgr. The first component is the Notification itself, the NotificationMgr manages all your notifications, so that your notifications are displayed above each other in case you create more than one notification (see image later on):

Notification.js (Ext.ux.Chip.Notification)
NotificatioMgr.js (Ext.ux.Chip.NotificationMgr)

Once you have added those 3, you can simply create a notification with the following code:

new Ext.ux.Chip.Notification({
title: 'Something changed',
text: 'This notification is to inform you that something has changed. I will autoclose in 10 seconds.',
autoClose: 10000
});

The parameter autoClose is optional and it defines the time in milliseconds after which the notification is closed automatically. If you leave out the autoClose, the notification has to be closed manually by clicking on it. Right now the notification looks like this:

A single notification with autoClose

The second example has no autoClose, meaning the notification has to be closed manually. Additionally it has an icon:

new Ext.ux.Chip.Notification({
title: 'Something different changed',
icon: 'images/award_star_gold_2.png',
text: 'This notification is to inform you that something different has changed. ' +
'I will not autoclose, but I have an icon! If you click me I will close.'
});

The icon is always shown on the right side of the notification title:

A single notification without autoClose, with icon

Last, if for some reason you want to change the behaviour, when the user clicks the notification (remember: by default the notification is closed when clicking it), you can do it by simply overriding the handler:

new Ext.ux.Chip.Notification({
title: 'Unclosable notification',
icon: 'images/award_star_gold_2.png',
text: 'If you click me, I will not close, instead my text will change',
handler: function() {
this.setText('See? My text has changed!');
}
});

If you have created all 3 notifications at the same time, the notifications now look like this:

3 notifications

If you close one of these notifications (or when they are auto-closed) the notifications above it will be automatically re-placed, so that there are no holes between the notifications. This is managed by the NotificationMgr.

0 comments

No Comments yet.

Write a comment

(will not be published)