Window with fadeIn/fadeOut animation

[Condor]

This gets asked a lot, so I thought I post it here:

Ext.ns('Ext.ux');
Ext.ux.FadeInWindow = Ext.extend(Ext.Window, {
    animateTarget : true,
    setAnimateTarget : Ext.emptyFn,
    animShow : function(){
        this.el.fadeIn({
            duration: .25,
            callback: this.afterShow.createDelegate(this, [true], false),
            scope: this
        });
    },
    animHide : function(){
        if (this.el.shadow) {
            this.el.shadow.hide();
        }
        this.el.fadeOut({
            duration: .25,
            callback: this.afterHide,
            scope: this
        });
    }
});

[talha06]

thanks dear Condor..

[chrizmaster]

simple and clean. thank you.

[guyfomi]

thank you condor, was looking for such functionality...

[cq.yangyu@gmail.com]

In IE 6 , After The window fadeout , there is a weird stuff block out the area. please check it. thks.

[sosy]

IE6? What is IE6? thats an browser from the last century.

IE is in my opinion strictly forbidden, but IE6 is beyond that.

Wow...

[wm003]

Works, but if you have a borderlayout with collabsible regions wihtin your window, theses regions appear right after the fadeout ..

[jnfrancois]

How would you use this in a concrete example ?
Where do you put this code and where would you call it ?