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

[NeonMonk]

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:

layoutConfig: {
    easing: 'easeOut',
    duration: 1,
    opacity: .1
} 

The code:

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();
                }
                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; 

[mystix]

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:

item.el is undefined
...
...
[Break on this error] item.el.setY(this.container.body.getY());

any example / recommended usage?

[NeonMonk]

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

[mystix]

alritey. works fine now. good stuff

[ckr]

Well Done NeonMonk!

Another silly demo here.

[angelko]

ckr very nice.

[NeonMonk]

Well Done NeonMonk!

Another silly demo here.

That was awesome, thanks ckr. Demonstrated it really well.

[nelius]

Hi NeonMonk

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

[chrizz_msweb]

Amazing!! Looks like flash

[fangzhouxing]

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

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)
	}