Hybrid View

  1. #1
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
    NeonMonk is on a distinguished road

      0  

    Default Ext.layout.SlideLayout - Sliding Card Layout (Shift Fx)

    Ext.layout.SlideLayout - Sliding Card Layout (Shift Fx)


    Hey guys,

    I had a need for a card panel layout that used slide effects.

    See: Live Demo.

    Shift fX config can be set through layoutConfig eg:

    PHP Code:
    layoutConfig: {
        
    easing'easeOut',
        
    duration1,
        
    opacity.1

    The code:
    PHP Code:
    Ext.layout.SlideLayout Ext.extend(Ext.layout.FitLayout, {
        
        
    deferredRender false,

        
        
    renderHidden false,
        
    easing'none',
        
    duration.5,
        
    opacity1,

        
        
    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 
    = [this.container.body.getX() - this.container.body.getWidth(), this.container.body.getX() + this.container.body.getWidth()];
                    
    this.activeItem.el.shift({ durationthis.durationeasingthis.easingopacitythis.opacityx:(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({ durationthis.durationeasingthis.easingopacity1x:this.container.body.getX()});
                }
                
    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);
            }
        }
    });
    Ext.Container.LAYOUTS['slide'] = Ext.layout.SlideLayout
    Last edited by NeonMonk; 1 Jan 2009 at 9:51 PM. Reason: Added live demo link

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


    neat.

    i tried swapping out TabPanel's CardLayout for a SlideLayout though, and it only worked for the first tab, after which the following error was thrown:
    Code:
    item.el is undefined
    ...
    ...
    [Break on this error] item.el.setY(this.container.body.getY());
    any example / recommended usage?

  3. #3
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
    NeonMonk is on a distinguished road

      0  

    Default


    SlideLayout wasn't originally compatible with deferredRendering..
    Code has now been updated so if you try it again mystic it should work fine.

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


    alritey. works fine now. good stuff

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

      0  

    Thumbs up


    Well Done NeonMonk!

    Another silly demo here.
    Thanks!
    Chuck

  6. #6
    Ext User
    Join Date
    Sep 2008
    Posts
    7
    Vote Rating
    0
    angelko is on a distinguished road

      0  

    Default


    ckr very nice.

  7. #7
    Ext User
    Join Date
    Jan 2008
    Posts
    70
    Vote Rating
    0
    NeonMonk is on a distinguished road

      0  

    Default


    Quote Originally Posted by ckr View Post
    Well Done NeonMonk!

    Another silly demo here.
    That was awesome, thanks ckr. Demonstrated it really well.

  8. #8
    Ext User nelius's Avatar
    Join Date
    Oct 2007
    Posts
    22
    Vote Rating
    0
    nelius is on a distinguished road

      0  

    Default


    Hi NeonMonk

    it would be great if you could add a licence header to the code. BSD new would be ideal ;-)

  9. #9
    Ext User
    Join Date
    Oct 2008
    Posts
    1
    Vote Rating
    0
    chrizz_msweb is on a distinguished road

      0  

    Default


    Amazing!! Looks like flash

  10. #10
    Sencha User fangzhouxing's Avatar
    Join Date
    Mar 2007
    Posts
    468
    Vote Rating
    2
    fangzhouxing is on a distinguished road

      0  

    Default


    I have problem using Ext.layout.SlideLayout in IE7, but ok in FF3.

    Code:
    panel.xf.CorpInfoDisplayPanel = Ext.extend(Ext.Panel, {
    	initComponent : function() {
    		Ext.apply(this, {
    			autoScroll : true,	
    			layout : "slide",
    			layoutConfig: 
    			{
    				easing: 'none', //none,easeIn
    				duration: .2,
    				opacity: .1
    			},
    			activeItem : 0,
    			items : [{
    				id : this.myId('checker'),
    				xtype : "form.xf.CheckerInfoDisplayForm"
    			}, {
    				id : this.myId('mainter'),
    				xtype : "form.xf.MainterInfoDisplayForm"
    			}, {
    				id : this.myId('projecter'),
    				xtype : "form.xf.ProjecterInfoDisplayForm"
    			}, {
    				id : this.myId('producer'),
    				xtype : "form.xf.ProducerInfoDisplayForm"
    			}, {
    				id : this.myId('advisor'),
    				xtype : "form.xf.AdvisorInfoDisplayForm"
    			}, {
    				id : this.myId('seller'),
    				xtype : "form.xf.SellerInfoDisplayForm"
    			}]
    		})
    		panel.xf.CorpInfoDisplayPanel.superclass.initComponent.call(this)
    	}