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

      0  

    Post Ext.ux.Notification

    Ext.ux.Notification


    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, {
                  
    iconClsthis.iconCls || 'information',
                
    width200,
                
    height100,
                
    autoScrolltrue,
                
    autoDestroytrue,
                
    plainfalse
              
    });
            
    this.task = new Ext.util.DelayedTask(this.hidethis);
            
    Ext.ux.ToastWindow.superclass.initComponent.call(this);
        },
        
    setMessage: function(msg){
            
    this.body.update(msg);
        },
        
    setTitle: function(titleiconCls){
            
    Ext.ux.ToastWindow.superclass.setTitle.call(thistitleiconCls||this.iconCls);
        },
        
    onRender:function(ctposition) {
            
    Ext.ux.ToastWindow.superclass.onRender.call(thisctposition);
        },
        
    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', {
                
    duration1,
                
    callbackthis.afterShow,
                
    scopethis
            
    });    
        },
        
    animHide: function(){
               
    Ext.ux.ToastWindowMgr.positions.remove(this.pos);
            
    this.el.ghost("b", {
                
    duration1,
                
    removetrue,
            
    scopethis,
            
    callbackthis.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.
    Attached Images
    Attached Files
    Last edited by efattal; 17 Nov 2008 at 9:35 AM. Reason: Bug corrected

  2. #2
    Sencha User krycek's Avatar
    Join Date
    Jun 2007
    Posts
    96
    Vote Rating
    0
    krycek is on a distinguished road

      0  

    Default


    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?

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

      0  

    Default


    Thanks krycek, I added a demo page on line.

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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!

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

      0  

    Default


    Thanks Animal. Code has been corrected.

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

  6. #6
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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.

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

      0  

    Default


    Of course. Code corrected. Thanks again.

  8. #8
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    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!

  9. #9
    Sencha - Community Support Team jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    DC Area =)
    Posts
    16,364
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    mmm... toast.

    great work

  10. #10
    Sencha User
    Join Date
    Oct 2007
    Location
    Berlin, Germany
    Posts
    891
    Vote Rating
    9
    wm003 will become famous soon enough

      0  

    Default


    Very nice, thanks for sharing.

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