Hybrid View

  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,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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,508
    Vote Rating
    56
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      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
    Sencha User ThorstenSuckow's Avatar
    Join Date
    Sep 2007
    Location
    Aachen, Germany
    Posts
    597
    Vote Rating
    2
    ThorstenSuckow is on a distinguished road

      0  

    Default


    Quote Originally Posted by efattal View Post
    Here is a small extension that displays unobstrusive message sliding windows like those in Outlook.
    This is really usefull... what's the license for this extension?

  8. #8

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

      0  

    Default NEW VERSION

    NEW VERSION


    Hi all,

    I modified my first post releasing a new version.
    Sometimes named tintin
    ExtJS Contributions:
    Ext.ux.ToastWindow | Ext.ux.BoxSelect | Ext.ux.VirtualKeyboard

  10. #10
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Default


    Quote Originally Posted by efattal View Post
    Hi all,

    I modified my first post releasing a new version.
    your Ext.ux.Notification ux rocks!

    p.s. you've gotta swap the m$-style alert for a mac-style Growl
    p.s.s. i've updated the thread title with the name of your new plugin. let me know if it should be otherwise.