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.

[ckr]

Updated the demo, so that you can select the type of easing to use, and adjust the duration with the slider.

Took me a few to find all the easing types, but then found a post where Animal said, Use console in firebug, type in Ext.lib.Easing.... Then look at the object. I 'll be damned if I can find that post again. Anyway, just an addition to the silly demo.

[wm003]

Very very nice stuff!

[ApocalypseCow]

nice work - what would be pretty neat now is a plugin for it which displays a "paging" toolbar so you can show the user how many cards there are and how far through the sequence they are and allow them to 'jump' to any card in the sequence etc.

[fangzhouxing]

http://slidelayout.freehostia.com/ (live demo) is down?