CardLayout override which fades the cards in/out

[ckr]

Great! Everything appears to be working in IE, FF, Chrome (only ones I tested).
I will leave the demo up for awhile incase others wish to see. Thanks Animal! Thanks Gugman!

Here was what I finally ended up with code wise:

Ext.override(Ext.layout.CardLayout, {
    setActiveItem : function(item){
        item = this.container.getComponent(item);
        if(this.activeItem != item){
            if (item.rendered && this.animate) {

                Ext.Fx.syncFx();
                if (this.activeItem) {

//                  Correct top position of card because they have to occupy the same space
//                  during animation.
                    var n = item.getEl();
                    n.setStyle({
                        position: 'absolute',
                        top: this.container.getLayoutTarget().getPadding('t') + 'px'
                    });
                    this.activeItem.getEl().fadeOut({
                        useDisplay: true,
                        callback: Ext.Component.prototype.hide,
                        scope: this.activeItem
                    });
                }
                this.activeItem = item;
                item.show();
                this.layout();
                n.fadeIn({
                    callback: function() {
                        n.setStyle({
                            position: 'relative'
                        });
                    }
                });
                Ext.Fx.sequenceFx();
            } else {
                if(this.activeItem){
                    this.activeItem.hide();
                }
                this.activeItem = item;
                item.show();
                this.layout();
            }
        }
    }
});

[vishalg]

n.setStyle({
    position: '',
});

should remove ',' to use in IE.

How hard would it be to support different effects ?

Thanks for this extension animal.

[ckr]

Ya that was corrected in my post.

Also check here there is a demo in that post.

[Buzzwords]

Has this override been incorporated into Extjs 4 proper? Does anyone know?