Notification extension for Ext JS 4.0.2+ (version: 2.1.3)

New improved features include:

• 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 eight corners and edges of document/manager can be used: 'tl', 'tr', 'br', 'bl', 't', 'l', 'b', 'r'.
• Both x and y axis can be used on corners. Notifications can slide in sideways.
• When a notification is closed any notifications after it slide back automatically.
• Hovering the mouse over the notification delays auto closing.
• Easy customization of css, animations, durations, spacings/padding etc.

Follow project on GitHub: https://github.com/EirikLorentsen/Ext.ux.window.Notification

Installation instructions:

Examine the source of this demo page and make your own modifications accordingly.
 

• Include: Notification.js
   
• To set a standard padding and text alignment on the notifications include this css on your page:

  .ux-notification-window .x-window-body {
  	text-align: center;
  	padding: 15px 5px 15px 5px;
  }
  				

• If you wish to add icons to the windows title you can include the info and error icons and add this css on your style sheet:
  

  .ux-notification-icon-information {
  	background-image: url('images/icon16_info.png');
  }
  
  .ux-notification-icon-error {
  	background-image: url('images/icon16_error.png');
  }
  				

  Then set the iconCls property to 'ux-notification-icon-information' or 'ux-notification-icon-error' to enable the icon on the notification.
   
• If you wish to style the notifications as in the Demo 2 below then include the fader.png and add the following css to your style sheet:
  

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

  Then set the cls property to 'ux-notification-light'. Note that this styling differs a bit between new browsers and >=IE8.