Ext.ux.Notification

[efattal]

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.

Thanks for all your advices, Animal. But let me understand: the config of the window specifies "autoDestroy: true" and the Ext.FX.ghost is called with "remove: true", still these are not enough and I have to call "this.destroy()"?

[joku]

sexy!

[fangzhouxing]

great work!

[anjelika]

Cool extension.
Is there a way to make the window stay on the screen and not dissapear after a specified time?
I've looked through your code but couldn't figure it out.
Thanks

[jmcneese]

here's how i do it (with a tweaked version of toastwindow):

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

Ext.ux.Notification = Ext.extend(Ext.Window, {
    initComponent: function(){
          Ext.apply(this, {
            iconCls: this.iconCls || 'x-icon-information',
            width: 200,
            autoHeight: true,
            closable: false,
            plain: false,
            draggable: false,
            bodyStyle: 'text-align:center;padding:1em;'
          });
          if(this.autoDestroy) {
            this.task = new Ext.util.DelayedTask(this.hide, this);
          } else {
              this.closable = true;
          }
        Ext.ux.Notification.superclass.initComponent.call(this);
    },
    setMessage: function(msg){
        this.body.update(msg);
    },
    setTitle: function(title, iconCls){
        Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
    },
    onRender:function(ct, position) {
        Ext.ux.Notification.superclass.onRender.call(this, ct, position);
    },
    onDestroy: function(){
        Ext.ux.NotificationMgr.positions.remove(this.pos);
        Ext.ux.Notification.superclass.onDestroy.call(this);
    },
    afterShow: function(){
        Ext.ux.Notification.superclass.afterShow.call(this);
        this.on('move', function(){
               Ext.ux.NotificationMgr.positions.remove(this.pos);
               if(this.autoDestroy) {
                this.task.cancel();
               }
        }, this);
        if(this.autoDestroy) {
            this.task.delay(this.hideDelay || 5000);
       }
    },
    animShow: function(){
        this.pos = 0;
        while(Ext.ux.NotificationMgr.positions.indexOf(this.pos)>-1)
            this.pos++;
        Ext.ux.NotificationMgr.positions.push(this.pos);
        this.setSize(200,100);
        this.el.alignTo(document, "br-br", [ -1, -1-((this.getSize().height+10)*this.pos) ]);
        this.el.slideIn('b', {
            duration: 1,
            callback: this.afterShow,
            scope: this
        });
    },
    animHide: function(){
           Ext.ux.NotificationMgr.positions.remove(this.pos);
        this.el.ghost("b", {
            duration: 1,
            remove: true
        });
    }
}); 

and the example usage:

new Ext.ux.Notification({
                iconCls:    (iconCls) ? iconCls : 'x-icon-exclamation',
                title:      (title) ? title : 'Notice',
                html:       message,
                autoDestroy: false,
            }).show((anchor) ? anchor : document); 

or

new Ext.ux.Notification({
                iconCls:    'x-icon-error',
                title:      'Ruh-row',
                html:       'This is just a stub.  This is only a stub.  If this would have been a real functioning doo-dad, you never would have even seen this stub.',
                autoDestroy: true,
                hideDelay:  5000
            }).show(document); 

[NoahK17]

I also notice the flickering in Firefox 3 RC1... any suggestions on how to fix it?

[anjelika]

Thanks jmcneese, works nice

[anjelika]

One more feature, pls :P
How can I disable the hide method as long as the mouse is over the window and re-enable it after the mouse is out?
Something like this, in pseudocode:

while (mouse_over) {stop the hide_timer}

Couldn't find any mouse events available to Ext.Window tho.
Any ideas?

[jveljan]

One more feature, pls :P
How can I disable the hide method as long as the mouse is over the window and re-enable it after the mouse is out?
Something like this, in pseudocode:

while (mouse_over) {stop the hide_timer}

Couldn't find any mouse events available to Ext.Window tho.
Any ideas?

Hi anjelika,

After show you can use:

window.getEl().on('mouseover', function(){ /*cancel hide task*/ });
window.getEl().on('mouseout', function(){ /*start hide task*/ });

I dont have time to test this, but I think it will work for you.

[learningExt]

Love the toast!!! I've added a short line of code to the bottom so it can be called like an alert()...

/**
 * Shorthand way of creating a toast window as an alert in one line.
 */
function toastAlert( the_message, the_title, the_icon ) {
    // Set defaults for the toast window title and icon
    the_title = typeof(the_title) != 'undefined' ? the_title : 'Notice';
    the_icon = typeof(the_icon) != 'undefined' ? the_icon : 'icon-information';
    
    // Create the toast window
    new Ext.ux.ToastWindow({
        title: the_title,
        html: the_message,
        iconCls: the_icon
    }).show(document);
} // eo function toastAlert

Now all I do is call toastAlert('Message here...'); and up pops the toast... Or I can specify a title and icon to add to the toast alert i.e. toastAlert('Message here...','Notification','icon-calendar');