CardLayout override which fades the cards in/out

[Animal]

You need to use layoutConfig: { animate: true } to make it animate.

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();
//              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'
                });
                if (this.activeItem) {
                    this.activeItem.getEl().fadeOut({
                        useDisplay:true,
                        callback: Ext.Component.prototype.hide,
                        scope: this.activeItem
                    });
                }
                this.activeItem = item;
                item.show();
                this.container.doLayout();
                n.fadeIn({
                    callback: function() {
                        n.setStyle({
                            position: ''
                        });
                    }
                });
                Ext.Fx.sequenceFx();
            } else {
                if(this.activeItem){
                    this.activeItem.hide();
                }
                this.activeItem = item;
                item.show();
                this.container.doLayout();
            }
        }
    }
});