Threaded View

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    0
    noamway is on a distinguished road

      0  

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

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


    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

  2. 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/

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

Thread Participants: 2