1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    481
    Answers
    12
    Vote Rating
    0
    abcdef is an unknown quantity at this point

      0  

    Default Answered: How to: Window that closes when clicked outside of it

    Answered: How to: Window that closes when clicked outside of it


    How do I have a window that closes itself when the user clicks anywhere outside of it?

  2. I saw the following (excerpt) in the menu.Manager class the other day. Probably could be used for what you're wanting.
    http://docs.sencha.com/ext-js/4-0/so...t-menu-Manager

    I bolded the juicy bits. In the window you'd set a cls property to watch for and then just reference it in the red conditional below.

    Code:
    onHide: function(m) {
            var me = this,
                active = me.active;
            active.remove(m);
            if (active.length < 1) {
                Ext.getDoc().un('mousedown', me.onMouseDown, me);
                me.attached = false;
            }
        },
    
    
        onShow: function(m) {
            var me = this,
                active   = me.active,
                last     = active.last(),
                attached = me.attached,
                menuEl   = m.getEl(),
                zIndex;
    
    
            me.lastShow = new Date();
            active.add(m);
            if (!attached) {
                Ext.getDoc().on('mousedown', me.onMouseDown, me);
                me.attached = true;
            }
            m.toFront();
        },
    Code:
    onMouseDown: function(e) {
            var me = this,
                active = me.active,
                lastShow = me.lastShow;
    
    
            if (Ext.Date.getElapsed(lastShow) > 50 && active.length > 0 && !e.getTarget('.' + Ext.baseCSSPrefix + 'menu')) {
                me.hideAll();
            }
        },

  3. #2
    Sencha - Support Team slemmon's Avatar
    Join Date
    Mar 2009
    Location
    Boise, ID
    Posts
    5,035
    Answers
    390
    Vote Rating
    185
    slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold slemmon is a splendid one to behold

      0  

    Default


    I saw the following (excerpt) in the menu.Manager class the other day. Probably could be used for what you're wanting.
    http://docs.sencha.com/ext-js/4-0/so...t-menu-Manager

    I bolded the juicy bits. In the window you'd set a cls property to watch for and then just reference it in the red conditional below.

    Code:
    onHide: function(m) {
            var me = this,
                active = me.active;
            active.remove(m);
            if (active.length < 1) {
                Ext.getDoc().un('mousedown', me.onMouseDown, me);
                me.attached = false;
            }
        },
    
    
        onShow: function(m) {
            var me = this,
                active   = me.active,
                last     = active.last(),
                attached = me.attached,
                menuEl   = m.getEl(),
                zIndex;
    
    
            me.lastShow = new Date();
            active.add(m);
            if (!attached) {
                Ext.getDoc().on('mousedown', me.onMouseDown, me);
                me.attached = true;
            }
            m.toFront();
        },
    Code:
    onMouseDown: function(e) {
            var me = this,
                active = me.active,
                lastShow = me.lastShow;
    
    
            if (Ext.Date.getElapsed(lastShow) > 50 && active.length > 0 && !e.getTarget('.' + Ext.baseCSSPrefix + 'menu')) {
                me.hideAll();
            }
        },

  4. #3
    Sencha User
    Join Date
    Mar 2010
    Posts
    481
    Answers
    12
    Vote Rating
    0
    abcdef is an unknown quantity at this point

      0  

    Default


    Perfect. Thanks!

Thread Participants: 1