1. #1
    Sencha User
    Join Date
    Mar 2010
    Posts
    492
    Vote Rating
    1
    Answers
    12
    abcdef is on a distinguished road

      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,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


    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
    492
    Vote Rating
    1
    Answers
    12
    abcdef is on a distinguished road

      0  

    Default


    Perfect. Thanks!

Thread Participants: 1