1. #11
    Ext User efattal's Avatar
    Join Date
    Dec 2007
    Posts
    21
    Vote Rating
    0
    efattal is on a distinguished road

      0  

    Default


    Quote Originally Posted by Animal View Post
    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()"?

  2. #12
    Ext User
    Join Date
    Mar 2008
    Posts
    60
    Vote Rating
    1
    joku is on a distinguished road

      0  

    Default


    sexy!

  3. #13
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    466
    Vote Rating
    1
    fangzhouxing is on a distinguished road

      0  

    Default


    great work!

  4. #14
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default


    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

  5. #15
    Ext User jmcneese's Avatar
    Join Date
    Feb 2008
    Posts
    25
    Vote Rating
    0
    jmcneese is on a distinguished road

      0  

    Default


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

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

    Ext.ux.Notification Ext.extend(Ext.Window, {
        
    initComponent: function(){
              
    Ext.apply(this, {
                
    iconClsthis.iconCls || 'x-icon-information',
                
    width200,
                
    autoHeighttrue,
                
    closablefalse,
                
    plainfalse,
                
    draggablefalse,
                
    bodyStyle'text-align:center;padding:1em;'
              
    });
              if(
    this.autoDestroy) {
                
    this.task = new Ext.util.DelayedTask(this.hidethis);
              } else {
                  
    this.closable true;
              }
            
    Ext.ux.Notification.superclass.initComponent.call(this);
        },
        
    setMessage: function(msg){
            
    this.body.update(msg);
        },
        
    setTitle: function(titleiconCls){
            
    Ext.ux.Notification.superclass.setTitle.call(thistitleiconCls||this.iconCls);
        },
        
    onRender:function(ctposition) {
            
    Ext.ux.Notification.superclass.onRender.call(thisctposition);
        },
        
    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', {
                
    duration1,
                
    callbackthis.afterShow,
                
    scopethis
            
    });
        },
        
    animHide: function(){
               
    Ext.ux.NotificationMgr.positions.remove(this.pos);
            
    this.el.ghost("b", {
                
    duration1,
                
    removetrue
            
    });
        }
    }); 
    and the example usage:
    PHP Code:
    new Ext.ux.Notification({
                    
    iconCls:    (iconCls) ? iconCls 'x-icon-exclamation',
                    
    title:      (title) ? title 'Notice',
                    
    html:       message,
                    
    autoDestroyfalse,
                }).
    show((anchor) ? anchor document); 
    or
    PHP Code:
    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.',
                    
    autoDestroytrue,
                    
    hideDelay:  5000
                
    }).show(document); 

  6. #16
    Ext JS Premium Member NoahK17's Avatar
    Join Date
    Apr 2008
    Location
    Atlanta, GA
    Posts
    518
    Vote Rating
    1
    NoahK17 is on a distinguished road

      0  

    Default


    I also notice the flickering in Firefox 3 RC1... any suggestions on how to fix it?
    Noah
    Senior Web Developer
    NBA.com

  7. #17
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default


    Thanks jmcneese, works nice

  8. #18
    Ext User
    Join Date
    Jun 2007
    Posts
    187
    Vote Rating
    1
    anjelika is on a distinguished road

      0  

    Default


    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:
    Code:
    while (mouse_over) {stop the hide_timer}
    Couldn't find any mouse events available to Ext.Window tho.
    Any ideas?

  9. #19
    Ext User
    Join Date
    May 2008
    Posts
    3
    Vote Rating
    0
    jveljan is on a distinguished road

      0  

    Default


    Quote Originally Posted by anjelika View Post
    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:
    Code:
    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.

  10. #20
    Ext User learningExt's Avatar
    Join Date
    Jun 2008
    Posts
    47
    Vote Rating
    0
    learningExt is on a distinguished road

      0  

    Default One-line way to use this as an alert

    One-line way to use this as an alert


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

    Code:
    /**
     * 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');