Window with fadeIn/fadeOut animation

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

Code:

---

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

---

thanks dear Condor.. :)

simple and clean. thank you.

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

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

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

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

Wow...

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

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