Ext.ux.Notification

**efattal** · 14 Apr 2008 2:07 AM

UPDATE 09.16.2008 : TOASTWINDOW IS DEAD. NOTIFICATION IS ALIVE.
I took in account your different contributions, especially that of jmcneese. I adopted the new name Ext.ux.Notification that seems more compliant to Ext spirit. I brought some corrections.

Enhancement: when you click on the notification window, it sticks and the close button shows up.

It seems to be OK in my different browsers.

Thanks a lot.

The attached source code (and the online demo) includes a sound effect when the window ejects.

Old post:
Here is a small extension that displays unobstrusive message sliding windows like those in Outlook.

Demo: http://www.efattal.fr/extjs-dev/examples/toastwindow/

CSS:

Code:

.error{background-image:url(../images/icons/gif/exclamation.gif);} .information{background-image:url(../images/icons/gif/information.gif) ! important;}

PHP Code:

Ext.ux.ToastWindowMgr = { positions: [] }; Ext.ux.ToastWindow = Ext.extend(Ext.Window, { initComponent: function(){ Ext.apply(this, { iconCls: this.iconCls || 'information', width: 200, height: 100, autoScroll: true, autoDestroy: true, plain: false }); this.task = new Ext.util.DelayedTask(this.hide, this); Ext.ux.ToastWindow.superclass.initComponent.call(this); }, setMessage: function(msg){ this.body.update(msg); }, setTitle: function(title, iconCls){ Ext.ux.ToastWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls); }, onRender:function(ct, position) { Ext.ux.ToastWindow.superclass.onRender.call(this, ct, position); }, onDestroy: function(){ Ext.ux.ToastWindowMgr.positions.remove(this.pos); Ext.ux.ToastWindow.superclass.onDestroy.call(this); }, afterShow: function(){ Ext.ux.ToastWindow.superclass.afterShow.call(this); this.on('move', function(){ Ext.ux.ToastWindowMgr.positions.remove(this.pos); this.task.cancel();} , this); this.task.delay(2000); }, animShow: function(){ this.pos = 0; while(Ext.ux.ToastWindowMgr.positions.indexOf(this.pos)>-1) this.pos++; Ext.ux.ToastWindowMgr.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(){ Ext.ux.ToastWindowMgr.positions.remove(this.pos); this.el.ghost("b", { duration: 1, remove: true, scope: this, callback: this.destroy }); } });

Usage:

PHP Code:

new Ext.ux.ToastWindow({ title: 'My title', html: 'My Message', iconCls: 'error' }).show(document);

May this code be useful to someone.

**krycek** · 14 Apr 2008 5:45 AM

Really cool!
Here is a code to be put into examples/toastwindow to test it:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>ToastWindow</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->

    <script type="text/javascript" src="../../ext-all.js"></script>
    <script>


    Ext.ux.ToastWindowMgr = {
	    positions: []
	};

	Ext.ux.ToastWindow = Ext.extend(Ext.Window, {
	    initComponent: function(){
	          Ext.apply(this, {
	              iconCls: this.iconCls || 'information',
	            width: 200,
	            height: 100,
	            autoScroll: true,
	            autoDestroy: true,
	            plain: false
	          });
	        this.task = new Ext.util.DelayedTask(this.hide, this);
	        Ext.ux.ToastWindow.superclass.initComponent.call(this);
	    },
	    setMessage: function(msg){
	        this.body.update(msg);
	    },
	    setTitle: function(title, iconCls){
	        Ext.ux.ToastWindow.superclass.setTitle.call(this, title, iconCls||this.iconCls);
	    },
	    onRender:function(ct, position) {
	        Ext.ux.ToastWindow.superclass.onRender.call(this, ct, position);
	    },
	    afterShow: function(){
	        Ext.ux.ToastWindow.superclass.afterShow.call(this);
	        this.on('move', function(){
	               Ext.ux.ToastWindowMgr.positions.remove(this.pos);
	            this.task.cancel();}
	        , this);
	        this.task.delay(2000);
	    },
	    animShow: function(){
	        this.pos = 0;
	        while(Ext.ux.ToastWindowMgr.positions.indexOf(this.pos)>-1)
	            this.pos++;
	        Ext.ux.ToastWindowMgr.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(){
	           Ext.ux.ToastWindowMgr.positions.remove(this.pos);
	        this.el.ghost("b", {
	            duration: 1,
	            remove: true
	        });
	    }
	});
	Ext.onReady(function()
	{
		new Ext.ux.ToastWindow({
		    title: 'My title',
		    html: 'My Message',
		    iconCls: 'error'
		}).show(document);
	});
    </script>
</head>
<body>


</body>
</html>

Is there a way to prevent the scrollbar to show when the window is hiding?

**efattal** · 14 Apr 2008 7:32 AM

Thanks krycek, I added a demo page on line.

**Animal** · 14 Apr 2008 7:43 AM

Neat!

There's smoething funny about the stop pos if you close a wnidow though. When a window has appeared, press ESC to close it. The next window starts its popup from the top of the last wnidow. if you ESC that one, the next one starts higher up too until they go off the top of the screen!

**efattal** · 14 Apr 2008 7:50 AM

Thanks Animal. Code has been corrected.

BTW, thanks for all the good job you do for the community.

**Animal** · 14 Apr 2008 7:57 AM

That works, that's what the onXXX functions are for; to allow each subclass to contribute their own functionality at each stage of the lifecycle.

With that in mind, it's important to remember to call the superclass's onXXX function, to allow it to perform its own necessary contribution at that stage. As you have it, the Window will not actually be destroyed.

**efattal** · 14 Apr 2008 8:00 AM

Of course. Code corrected. Thanks again.

**Animal** · 14 Apr 2008 8:23 AM

That doesn't actually get called if you let the windows fade out. You need to callback to the destroy function at the end of the fade out animation.

Test with Firebug open to the HTML tab. You can see the document filling up with every popup you ask for!

**jay@moduscreate.com** · 14 Apr 2008 9:30 AM

mmm... toast.

great work

**wm003** · 14 Apr 2008 10:30 AM

Very nice, thanks for sharing.

On Firefox the toasts do a little stuttering and the bottom line looks somehow...uhm...messy while fading in...

Ext.ux.Notification

Thread Tools

Search Thread

Display

Ext.ux.Notification

Ext.ux.Notification