1. #1
    Sencha User
    Join Date
    Nov 2008
    Location
    Currently Mexico
    Posts
    133
    Vote Rating
    0
    jmariani is on a distinguished road

      0  

    Default Ext.ux.plugins.blind

    Ext.ux.plugins.blind


    More a work in progress and proof of concept than a final product.
    It adds 'slideIn' and 'slideOut' effect to panels, like OSX does.

    Consider it very primitive, but good starting point.

    Congrats to Animal & Sean McDaniel for providing the initial code & ideas. And to Ext team for providing us Ext. And Saki for providing so great tutorials.

    Try it and share your comments.

    Here's the code:

    Code:
    // create namespace for plugins
    Ext.namespace('Ext.ux.plugins');
     
    /**
     *
     * @author  Jorge Mariani
     * @date    April 15, 2010
     *
     * @class Ext.ux.plugins.blind
     * @extends Ext.util.Observable
     *
     * Config options for panel:
     *
     *	modal: if set to true, will mask the page (Same as a modal window)
     *	slideFrom: Element to align the panel to and start the animation. If not set, Ext.getBody() will be used.
     *
     * Function added:
     *	
     *	dismiss: Call this to slideOut the panel.
     */
    Ext.ux.plugins.blind = function(config) {
        Ext.apply(this, config);
    };
     
    // plugin code
    Ext.extend(Ext.ux.plugins.blind, Ext.util.Observable, {
        init:function(panel) {
    		Ext.apply(panel, {
    			show: panel.show.createSequence(function(){
    		        if (!panel.rendered) {
    					this.render(Ext.getBody());
    		        }
    
    				if (panel.modal) {
    //					var mask = Ext.getBody().mask();
    					var mask = Ext.get(document.body).mask();
    					panel.el.position('fixed', Number(mask.getStyle('z-index')) + 1);
    				}
    
    				if (panel.slideFrom) {
    					panel.el.alignTo(this.slideFrom, 't-t');
    				} else {
    					panel.el.alignTo(Ext.getBody(), 't-t');
    				}        
    		        panel.el.slideIn('t', {
    		            callback: function() {
    		                panel.el.visible = true; // Ext bug. Flag not set causes enableShadow to fail.
    		            },
    		            scope: this
    		        });
    			})
    			, dismiss: function(){
    		        panel.el.slideOut('t', {
    		            callback: function() {
    		            	panel.destroy();
    //						Ext.getBody().unmask();
    						if (panel.modal) {
    							Ext.get(document.body).unmask();
    						}
    		            },
    		            scope: this
    		        });
    			}
            });
        } // end of function init
    }); // end of extend
    
    Ext.preg('blind', Ext.ux.plugins.blind);
    
    // end of file

  2. #2
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    demo ?
    Vador

  3. #3
    Sencha User wemerson.januario's Avatar
    Join Date
    Nov 2008
    Location
    Brazil, Goiânia
    Posts
    472
    Vote Rating
    12
    wemerson.januario will become famous soon enough

      0  

    Default


    Any demo?
    Usage?
    Thanks for sharing.
    Wemerson Januario
    Twitter:
    @januariocoder
    Email: wemerson.januario@gmail.com

    From: Goiânia, Brazil
    Ext JS Developer

  4. #4
    Sencha User
    Join Date
    Nov 2008
    Location
    Currently Mexico
    Posts
    133
    Vote Rating
    0
    jmariani is on a distinguished road

      0  

    Default


    Quote Originally Posted by ajaxvador View Post
    demo ?
    A small and primitive demo...

  5. #5
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    realy good
    Vador

  6. #6
    Sencha User
    Join Date
    Nov 2008
    Location
    Currently Mexico
    Posts
    133
    Vote Rating
    0
    jmariani is on a distinguished road

      0  

    Default


    Tku.

  7. #7
    Sencha - Services Team Stju's Avatar
    Join Date
    Dec 2008
    Location
    Redwood city, California
    Posts
    290
    Vote Rating
    3
    Stju is on a distinguished road

      0  

    Default


    If You move or resize the window, panel stays in the same position. Panel should move along with window, or any other parent it is attached..

  8. #8
    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


    Sean McDaniel did it for Ext JS 2.x and 1.x: http://www.extjs.com/forum/showthrea...ux.WindowBlind

  9. #9
    Sencha User
    Join Date
    Nov 2008
    Location
    Currently Mexico
    Posts
    133
    Vote Rating
    0
    jmariani is on a distinguished road

      0  

    Default


    Yes, that's why I credited Sean. Also, this is a plugin for a panel, not for a window. And, like I said, is more a proof of concept than a finished product.

    Thank you!

  10. #10
    Sencha Premium Member ajaxvador's Avatar
    Join Date
    Nov 2007
    Location
    PARIS, FRANCE
    Posts
    206
    Vote Rating
    0
    ajaxvador is on a distinguished road

      0  

    Default


    blind bug in portlet !!
    Vador