I'm creating a notification extension and I've run into a minor glitch. When a notification window is created, it's shifted into view using the 'shift' Fx function. After a specified amount of time, this notification window fades out (using Ext.util.DelayedTask). Upon the creation of another notification window, any current notifications are shifted up, again using the 'shift' Fx function. The problem shows when a series of new notifications are created within a short span of time. For some reason, the DelayedTask is not firing at the proper time. I can't figure out why.

Here's the live demo: http://www.ann0yanc3.com/Ext.ux.Notify/

To display a notification window, click anywhere within the browser window. Click multiple times in a row (about 7 or 8 times) to reveal the issue. You'll notice that some notification windows aren't fading out at the right time.

If you add new notifications in a timely fashion, the issue does not exist.

Here's the extension code:

Code:
/**
 * Ext.ux.Notify extension
 * 
 * This extension is based on the work of efattal from the ExtJS forums.
 * http://extjs.com/forum/showthread.php?t=32365
 * 
 */
// create namespaces for the notify extension
Ext.namespace('Ext.ux.Notify');
Ext.namespace('Ext.ux.NotifyMgr');
/**
 * @object Ext.ux.NotifyMgr
 * This objects stores configuration options and positions for the notifications.
 */
Ext.ux.NotifyMgr = {
    width: 250,
    hideDelay: 3000,
    positions: [],
    windows: []
};
/**
 * @class Ext.ux.Notify
 * @extends Ext.Window
 * This class defines a notification.
 */
Ext.ux.Notify = Ext.extend(Ext.Window, {
	initComponent: function(){
		Ext.apply(this, {
			shadow:false,
			draggable:false,
			resizable:false,
			bodyStyle: 'padding:10px'
		});
		this.task = new Ext.util.DelayedTask(this.hide, this);
		Ext.ux.Notify.superclass.initComponent.call(this);
	},
	onDestroy: function(){
		Ext.ux.NotifyMgr.positions.remove(this.pos);
		Ext.ux.NotifyMgr.windows.remove(this);
		Ext.ux.Notify.superclass.onDestroy.call(this);
	},
	afterShow: function(){
		if(Ext.isMac && Ext.isGecko){ // work around stupid FF 2.0/Mac scroll bar bug
        	    this.cascade(this.setAutoScroll);
                }
		if(this.layout){
                    this.doLayout();
                }
                if(this.keyMap){
                    this.keyMap.enable();
                }
		this.fireEvent("show", this);
		this.on('close', function(){
			Ext.ux.NotifyMgr.positions.remove(this.pos);
			Ext.ux.NotifyMgr.windows.remove(this);
			this.task.cancel();
		}, this);
		this.task.delay(Ext.ux.NotifyMgr.hideDelay);
	},
	animShow: function(){
		this.pos = 0;
		while (Ext.ux.NotifyMgr.positions.indexOf(this.pos) >- 1) this.pos++;
		Ext.ux.NotifyMgr.positions.push(this.pos);
		this.el.show();
		this.setWidth(Ext.ux.NotifyMgr.width);
		var bh = Ext.getBody().getComputedHeight(),
		     bw = Ext.getBody().getComputedWidth();
		this.el.setLocation(bw - this.getInnerWidth() - this.getFrameWidth() - 10, bh);
		if (Ext.ux.NotifyMgr.windows.length > 0) {
			for (var i = 0; i < Ext.ux.NotifyMgr.windows.length; ++i) {
				var offset = 0;
				for (var j = i; j < Ext.ux.NotifyMgr.windows.length; ++j) {
					offset += Ext.ux.NotifyMgr.windows[j].getInnerHeight() + Ext.ux.NotifyMgr.windows[j].getFrameHeight() + 10;					
				}
				Ext.ux.NotifyMgr.windows[i].el.shift({
					concurrent: true,
					y: bh - this.getInnerHeight() - this.getFrameHeight() - offset - 10,
					duration:1
				});
			}
		}
		Ext.ux.NotifyMgr.windows.push(this);
		this.el.shift({
			y: this.el.getY() - this.getInnerHeight() - this.getFrameHeight() - 10,
			duration: 1,
			callback: this.afterShow,
			scope: this
		});
	},
	animHide: function(){
		Ext.ux.NotifyMgr.positions.remove(this.pos);
		Ext.ux.NotifyMgr.windows.remove(this);
		this.el.fadeOut({
			duration: 2,
			scope: this,
			block: true,
			stopFx: true,
			callback: this.destroy
		});
	}
});
Here's code that inits the demo:

Code:
// reference local blank image
Ext.BLANK_IMAGE_URL = 'lib/ext/resources/images/default/s.gif';
// initialize app when Ext is ready
Ext.onReady(function(){
	var test = 1;			
	Ext.EventManager.on(window, 'click', function(){
		new Ext.ux.Notify({
			title: 'Test ' + test,
			html: 'This is a test'
		}).show(document);
		test++;
	}, this);
});
Any help is appreciated. Thanks.