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

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    872
    Answers
    3564
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

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

      0  

    Default


    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

  5. #4
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,993
    Vote Rating
    212
    Answers
    476
    slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of slemmon has much to be proud of

      0  

    Default


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

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

      0  

    Default


    Amazing! BIG thanks :-)

Thread Participants: 2