CODEWITHSUNDEEP
extjs
Vivek Agrawal21
Vivek Agrawal21

Reputation: 342

Fade in /Fade out in Ext.window

I am using 

var  modalWindow = new Ext.Window({
title: "Window",
items: [
    {html: "<div id='example'>Hello</div> "}
]
});
modalWindow.show();

to open a modal window. I need fadein/fadeout features on this window. Please help..

Upvotes: 2

Views: 1960

Answers (1)

Guilherme Lopes
Guilherme Lopes

Reputation: 4760

This should do it: 

    var  modalWindow = new Ext.Window({
        title: "Window",
        width: 400,
        height: 300,
        html: "<div id='example'>Hello</div> ",
        listeners : {
            show : function(window) {
                window.getEl().setOpacity(0);
                window.getEl().fadeIn({duration: 2000});
            },
            beforeclose : function(window) {
                if(!window.shouldClose) {
                    window.getEl().fadeOut({duration: 2000, callback: function() {
                        window.shouldClose = true;
                        window.close();
                    }});
                }
                return window.shouldClose ? true : false;
            }
        }

    });
    modalWindow.show();

Upvotes: 5

Related Questions