Results 1 to 5 of 5

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

  1. #1
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    1
      0  

    Default 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 - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,553
    Answers
    3931
    Vote Rating
    1272
      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 @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  4. #3
    Ext JS Premium Member
    Join Date
    Feb 2008
    Posts
    51
    Vote Rating
    1
      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 - Documentation Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    6,162
    Answers
    501
    Vote Rating
    257
      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
    1
      0  

    Default

    Amazing! BIG thanks :-)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •