1. #11
    Ext JS Premium Member stever's Avatar
    Join Date
    Mar 2007
    Posts
    1,407
    Vote Rating
    6
    stever will become famous soon enough stever will become famous soon enough

      0  

    Default


    My contribution adds vertical sliding as well. I needed it to vertically shrink to the size of the current item so that became the option resizeHeight. After going several rounds with various easing settings we realized that the easing setting for the animation should not be the same the easing for the opacity change, so we hard coded opacity easing. Results below:


    PHP Code:
    /* http://extjs.com/forum/showthread.php?t=43120 */

    Ext.layout.SlideLayout Ext.extend(Ext.layout.FitLayout, {
        
    deferredRender true,
        
    renderHidden false,
        
    easing'easeBoth',
        
    duration0.5,
        
    opacity0.1,
        
    direction:'horizontal',
        
    resizeHeightfalse,
        
    setActiveItem : function(itemInt){
            if (
    typeof(itemInt) == 'string') { itemInt this.container.items.keys.indexOf(itemInt); }
            else if (
    typeof(itemInt) == 'object') { itemInt this.container.items.items.indexOf(itemInt); }
            var 
    item this.container.getComponent(itemInt);
            if(
    this.activeItem != item){
                if(
    this.activeItem){
                    if(
    item && (!item.rendered || !this.isValidParent(itemthis.container))){
                        
    this.renderItem(itemitemIntthis.container.getLayoutTarget()); 
                        
    item.show();
                    }
                    var 
    isHorizontal this.direction=='horizontal',
                        
    direction this.activeItemNo itemInt,
                        
    ythis.container.body.getY(),
                        
    hthis.container.body.getHeight(),
                        
    xthis.container.body.getX(),
                        
    wthis.container.body.getWidth(),
                        
    ai this.activeItem.el,
                        
    newXisHorizontal ? (direction ? -w:w) : 0,
                        
    newY=!isHorizontal ? (direction ? -h:h) : 0;
                    
    ai.setOpacity(this.opacity,{duration:this.duration,easing:'easeOut'}).shift({ durationthis.durationeasingthis.easingxx+newXyy+newYcallback:function(){ai.setVisible(false)}});
                    
    item.el.setY(y-newY).setX(x-newX).setVisible(true).shift({ durationthis.durationeasingthis.easingopacity1xxyy});
                    if (
    this.resizeHeight){
                        (function(){
                            
    this.container.body.setHeight(item.el.getHeight(),{duration:this.duration/4});
                        }).
    defer(1,this);
                    }
                }
                
    this.activeItemNo itemInt;
                
    this.activeItem item;
                
    this.layout();
            }
        },
        
        
    renderAll : function(cttarget){
            if(
    this.deferredRender){
                
    this.renderItem(this.activeItemundefinedtarget);
            }else{
                
    Ext.layout.CardLayout.superclass.renderAll.call(thiscttarget);
            }
            (function(){
                
    this.container.body.setHeight(this.activeItem.el.getHeight());
            }).
    defer(1,this);
        }
    });
    Ext.Container.LAYOUTS['slide'] = Ext.layout.SlideLayout

  2. #12
    Sencha User
    Join Date
    Sep 2007
    Location
    Tulsa, Oklahoma
    Posts
    178
    Vote Rating
    1
    ckr is on a distinguished road

      0  

    Default


    I was also thinking, that the card layout should actually look like they were stacking one on top of another. Here is a variation of that idea, inside a Window. I played around with another where you shifted both X and Y (diagonally).

    Maybe combine all these ideas into a new extension, where you can specify the type of slide animation, add maybe a timer (if you wanted to automatically step to the next), and a navbar that automatically adjusts to the number of panels you add (like what ApocalypseCow suggested).

    Anyway, fun to play around with.
    Thanks!
    Chuck

  3. #13
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    I have problem...i am sliding panel with lots of text fields...it messes up screen when it slides ..outside the window....

    it is ok for all other things.

  4. #14
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    Sliding layout is not working well when if it is on a window , it workd well if it rendered toa div.

    Anyone solved this problem?..

    It takes background image and messes up as it slides out when it is on a window.

  5. #15
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    As i see more , it happens only if panels have controls like radio button and text fields..

  6. #16
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    testslide.html
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
        <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext/ext-all.js"></script>
        <script type="text/javascript" src="cardslideexample.js"></script>
    
        <!-- A Localization Script File comes here -->
        <script type="text/javascript">
            Ext.onReady(testLayout.app.init, testLayout.app);
        </script>
    
    
        <title>Slider Layout Samples</title>
    </head>
    
    <body style="background: url( ../../../assets/media/images/welcome/redspring.jpg); ">
    	<div id="myDiv" style="position:absolute;left:300px;top:200px;">
    
    	</div>
    </body>
    
    </html>
    cardslideexample.js
    Code:
    ////////////////////////////////////////////////////////////////////////////////			
    //
    // reference local blank image
    //
    Ext.BLANK_IMAGE_URL = '../extjs/resources/images/default/s.gif';
     
    // create namespace
    Ext.namespace('testLayout');
     
    // create application
    testLayout.app = function() {
        // do NOT access DOM from here; elements don't exist yet
     
        // private variables
     
        // private functions
     
        // public space
        return {
            // public properties, e.g. strings to translate
     
            // public methods
            init: function() {
    
    			var easingType = new Array(16);
    			easingType[0]  = "none";
    			easingType[1]  = "easeIn";
    			easingType[2]  = "easeOut";
    			easingType[3]  = "easeBoth";
    			easingType[4]  = "easeInStrong";
    			easingType[5]  = "easeOutStrong";
    			easingType[6]  = "easeBothStrong";
    			easingType[7]  = "elasticIn";
    			easingType[8]  = "elasticOut";
    			easingType[9]  = "elasticBoth";
    			easingType[10] = "backIn";
    			easingType[11] = "backOut";
    			easingType[12] = "backBoth";
    			easingType[13] = "bounceIn";
    			easingType[14] = "bounceOut";
    			easingType[15] = "bounceBoth";
    
    			Ext.layout.SlideLayout = Ext.extend(Ext.layout.FitLayout, 
    			{
    				deferredRender : false,
    				renderHidden : false,
    				easing: 'none',
    				duration: .5,
    				opacity: 1,
    
    				setActiveItem : function(itemInt)
    				{
    					if (typeof(itemInt) == 'string') 
    					{ 
    						itemInt = this.container.items.keys.indexOf(itemInt); 
    					}
    					else if (typeof(itemInt) == 'object') 
    					{ 
    						itemInt = this.container.items.items.indexOf(itemInt); 
    					}
    
    					var item = this.container.getComponent(itemInt);
    
    					if(this.activeItem != item)
    					{
    						if(this.activeItem)
    						{
    							if(item && (!item.rendered || !this.isValidParent(item, this.container)))
    							{
    								this.renderItem(item, itemInt, this.container.getLayoutTarget()); 
    								item.show();
    							}
    	
    							alert(this.container.body.getX() );
    							var s = [this.container.body.getX() - this.container.body.getWidth(), 
    										this.container.body.getX() + this.container.body.getWidth()];
    
    							this.activeItem.el.shift(
    							{ 
    								duration: this.duration, 
    								easing: this.easing, 
    								opacity: this.opacity, 
    								x:(this.activeItemNo < itemInt ? s[0] : s[1] )
    							});
    							item.el.setY(this.container.body.getY());
    							item.el.setX((this.activeItemNo < itemInt ? s[1] : s[0] ));
    							item.el.shift(
    							{ 
    								duration: this.duration, 
    								easing: this.easing, 
    								opacity: 1, 
    								x:this.container.body.getX()
    							});
    						}
    						this.activeItemNo = itemInt;
    						this.activeItem = item;
    						this.layout();
    					}
    				},
        
    				renderAll : function(ct, target)
    				{
    					if(this.deferredRender)
    					{
    						this.renderItem(this.activeItem, undefined, target);
    					}
    					else
    					{
    						Ext.layout.CardLayout.superclass.renderAll.call(this, ct, target);
    					}
    				}
    			});
    			Ext.Container.LAYOUTS['slide'] = Ext.layout.SlideLayout; 
    
    		
    
    			var rgEasing = new Ext.form.RadioGroup(
    			{
    						fieldLabel: 'Sliding Effects',
    						inputType: 'radio',
    						columns:2,
    						vertical: true,
    						items:
    						[
    							{ 
    								boxLabel: 'none',         
    								name: 'rb-auto', 
    								inputValue:0,
    								checked: true,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 0);}}
    								}
    							},{
    								boxLabel: 'easeIn',         
    								name: 'rb-auto', 
    								inputValue:1,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 1);}}
    								}
    							},{
    								boxLabel: 'easeOut',        
    								name: 'rb-auto', 
    								inputValue:2, 
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 2);}}
    								}
    							},{
    								boxLabel: 'easeBoth',       
    								name: 'rb-auto', 
    								inputValue:3,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 3);}}
    								}
    							},{
    								boxLabel: 'easeInStrong',   
    								name: 'rb-auto', 
    								inputValue:4,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 4);}}
    								}
    							},{
    								boxLabel: 'easeOutStrong',  
    								name: 'rb-auto', 
    								inputValue:5,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 5);}}
    								}
    							},{
    								boxLabel: 'easeBothStrong', 
    								name: 'rb-auto', 
    								inputValue:6,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 6);}}
    								}
    							},{
    								boxLabel: 'elasticIn',      
    								name: 'rb-auto', 
    								inputValue:7,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 7);}}
    								}
    							},{
    								boxLabel: 'elasticOut',     
    								name: 'rb-auto', 
    								inputValue:8,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 8);}}
    								}
    							},{
    								boxLabel: 'elasticBoth',    
    								name: 'rb-auto', 
    								inputValue:9,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 9);}}
    								}
    							},{
    								boxLabel: 'backIn',         
    								name: 'rb-auto', 
    								inputValue:10,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 10);}}
    								}
    							},{
    								boxLabel: 'backOut',        
    								name: 'rb-auto', 
    								inputValue:11,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 11);}}
    								}
    							},{
    								boxLabel: 'backBoth',       
    								name: 'rb-auto', 
    								inputValue:12,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 12);}}
    								}
    							},{
    								boxLabel: 'bounceIn',       
    								name: 'rb-auto', 
    								inputValue:13,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 13);}}
    								}
    							},{
    								boxLabel: 'bounceOut',      
    								name: 'rb-auto', 
    								inputValue:14,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 14);}}
    								}
    							},{
    								boxLabel: 'bounceBoth',     
    								name: 'rb-auto', 
    								inputValue:15,
    								listeners:
    								{
    									'check': function(cbName, checked){if (checked){setEasing(cbName, checked, 15);}}
    								}
    							}
    						]
    				});
    //
    //// Card Stuff ///////////////////////////////////////////////////////////////			
    //
    			var panCARD0 = new Ext.TabPanel(
    			{
    				id:'card-0',
    				frame: false,
    				border:false,
        			activeTab: 0,
    				bodyStyle: 'background-color: #FFF8Dc',
    				items: [
    				{
            			title: 'Tab 1',
    					border: false,
    					frame: false,
    					bodyStyle: 'background-color: #FFF8Dc;padding:10px 10px 0;',
    					items: [ 
    						new Ext.FormPanel(
    						{ 
    							items:rgEasing 
    						})
    					]
        			},{
            			title: 'Tab 2',
    					border: false,
    					frame: false,
    					bodyStyle: 'background-color: #EEDCC3',
            			html: 'Another one'
        			}]
    			});
    
    
    			sliderTEXT = new Ext.form.Label(
    			{
    				x: 10,
    				y: 50,
    				text: 'Adjust duration (N*0.1)'
    			});
    
    			sliderUpdate = new Ext.form.TextField(
    			{
    				x: 10,
    				y: 20,
    				value: 1
    			});
    
    			var panCARD1 = new Ext.Panel(
    			{
    				id:'card-1',
    				hidden: true,
    				frame: false,
    				bodyStyle: 'background-color: #EAEAEA',
    				layout: 'absolute',
    				items: [
    					new Ext.Slider({
    					    width: 150,
    						 x: 10,
    					    value: 7,
    					    increment: 1,
    					    minValue: 1,
    					    maxValue: 15,
    						 listeners:
    						 {
    							'change':function(slide, newValue)
    							{
    								sliderUpdate.setValue(newValue);					
    								panCARDS.getLayout().duration=newValue*0.1;
    							}
    						 }
    					}),
    					sliderUpdate,
    					sliderTEXT
    				],
    				border:false
    			});
    
    
    
    			var panCARD2 = new Ext.Panel(
    			{
    				id:'card-2',
    				hidden: true,
    				frame: false,
    				border:false,
    				bodyStyle: 'background-color: #FFC77F',
    				layout:'accordion',
    				defaults: {
    					// applied to each contained panel
    					//bodyStyle: 'padding:15px',
    					border: false,
    					frame: false
    				},
    				layoutConfig: {
    					// layout-specific configs go here
    					titleCollapse: false,
    					animate: true,
    					activeOnTop: false
    				},
    				items: [{
    					title: 'Panel 1',
    					bodyStyle: 'background-color: #003EBA',
    					html: '<p>Panel content!</p>'
    				},{
    					title: 'Panel 2',
    					bodyStyle: 'background-color: #5D7CBA',
    					html: '<p>Panel content!</p>'
    				},{
    					title: 'Panel 3',
    					bodyStyle: 'background-color: #FF9000',
    					html: '<p>Panel content!</p>'
    				}]
    			});
    
    			var navHandler = function(direction)
    			{
    
    				startIndex = 0;
    				endIndex = 2;
    				myItem = Ext.getCmp('panCARDS').getLayout().activeItem;
    				myItemString = myItem.id.split('-');	
    
    				myIndex = parseInt(myItemString[1])+direction;
    
    				if	(myIndex == startIndex){ Ext.getCmp('move-prev').disable();}
    
    				if (myIndex > startIndex){ Ext.getCmp('move-prev').enable();}
    
    				if (myIndex == endIndex){ Ext.getCmp('move-next').disable();}
    
    				if (myIndex < endIndex){ Ext.getCmp('move-next').enable();}
    
    				nextItem = 'card-'+myIndex;
    				panCARDS.getLayout().setActiveItem(nextItem);
    				
    			}
    
    			var panCARDS = new Ext.Panel(
    			{
    				title:'Container Panel',
    				id:'panCARDS',
    				frame: false,
    				border:true,
    				width: 400,
    				height: 400,
    				layout:'slide',
    				layoutConfig: 
    				{
    					easing: 'none',
    					duration: 1,
    					opacity: .1
    				},
    				activeItem:0,
    				bbar:
    				[
    					{
    						id:'move-prev',
    						text: 'Prev Card',
    						handler: navHandler.createDelegate(this, [-1]),
    						disabled:true
    					},'->',{
    						id:'move-next',
    						text:'Next Card',
    						disabled:false,
    						handler: navHandler.createDelegate(this, [1])
    					}
    				]
    			});
    			
    			var win=new Ext.Window(
    			{
    				x:300,
    				y:200,
    				width:400,
    				height:400,
    				layout:'fit',
    				modal:true,
    				items:panCARDS
    			});
    			
    			win.show();
    		//	panCARDS.render('myDiv');
    // Add cards
    
    			panCARDS.add(panCARD0);
    			panCARDS.add(panCARD1);
    			panCARDS.add(panCARD2);
    			panCARDS.getLayout().setActiveItem(0);
    			panCARDS.doLayout();
    
    
    			function setEasing(cbName, isChecked, Value)
    			{
    				if (isChecked)
    				{
    					panCARDS.getLayout().easing=easingType[Value];
    				}
    			}
    
            } // end of init
        };
    }(); // end of app
    
    // end of file
    it is messing up mainly if there is a formpanel inside in one of those cards

  7. #17
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    anyone?

  8. #18
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    anyone?

  9. #19
    Ext User
    Join Date
    Apr 2008
    Posts
    418
    Vote Rating
    0
    pokerking400 is on a distinguished road

      0  

    Default


    anyone?

  10. #20
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    It's a nasty bug in Firefox.

    Quick & dirty workaround:
    Code:
    <style type="text/css">
    .ext-gecko .x-form-item {overflow: hidden!important;}
    </style>