What do I need to set if I want the Window will be close

[noamway]

When the user click on the mask area?
I can't use blur because there is times when I open more then one window and I want only the top one will close.

Thanks

[mitchellsimoens]

You can add a listener on the document body and if it's not over the component then close it. This is how menus do it.

[noamway]

I tried this but the click that open the window always open and close the windows because of this listener. I of course try to add all kind of listener but something not working here.

Do you have any example I can use to see what I'm doing wrong?

Thanks for the help

[slemmon]

Try the below plugin. This way the document body being clicked won't close your active window if the active window is contained within another component (such as a tab in a tabpanel) and the document body is clicked, but the mask itself is not.

**WARNING - This uses Ext.WindowManager.mask which is NOT a public property - use at your own risk.

http://jsfiddle.net/slemmon/YgZAR/

Ext.define('ModalClosePlugin', {
    extend: 'Ext.AbstractPlugin'
    , alias: 'plugin.modalclickclose'
    
    , init: function (win) {
        var me = this;
        me.win = win;
        
        win.on('render', me.onRender, me);
    }
    
    , onRender: function (win) {
        var me = this;
        win.on({
            show: function () {
                var mask = Ext.WindowManager.mask;
                if (mask) {
                    mask.on('click', me.modalClick, me);
                }
            }
            , hide: function () {
                var mask = Ext.WindowManager.mask;
                if (mask) {
                    mask.un('click', me.modalClick, me);
                }
            }
            , buffer: 20
            , scope: me
        });
    }
    
    , modalClick: function () {
        var active = Ext.WindowManager.getActive();
        
        if (active == this.win) {
            active.close();
        }
    }
});


Ext.widget('tabpanel', {
    renderTo: Ext.getBody()
    , height: 400
    , width: 400
    , items: [{
        title: 'mask closable window'
        , items: [{
            xtype: 'window'
            , plugins: 'modalclickclose'
            , title: 'Contained Hide on modal click'
            , autoShow: true
            , height: 200
            , width: 200
            , modal: true
        }]
    }, {
        title: 'not mask closable window'
        , items: [{
            xtype: 'window'
            , title: 'Don\'t Hide on modal click'
            //, plugins: 'modalclickclose'    // uncomment to enable closing on modal mask click
            , autoShow: true
            , height: 200
            , width: 200
            , modal: true
        }]
    }]
});


Ext.widget('window', {
    title: 'Hide on modal click'
    , plugins: 'modalclickclose'
    , autoShow: true
    , height: 200
    , width: 200
    , modal: true
});

[noamway]

Amazing! BIG thanks :-)