ExtJS 5.1 WINDOW BLUR

Posted 2020-06-10

Description

在ExtJS 中，当点击其他地方时，关闭 window。

Answer 1

Step 1: Register for mousedown event

this.panel.show();
Ext.getDoc().on("mousedown", this.handleDocMouseDown, this);

Step 2: Handle the event

handleDocMouseDown : function(e) {
　　if (!e.within(this.panel.getEl())) {
   　　this.panel.destroy();
   　　Ext.getDoc().un("mousedown", this.handleDocMouseDown, this);
　　}
}

Answer 2

Ext.applyIf(me, {
        items: [
            {
                xtype: ‘button‘,
                text: ‘Done‘,
                listeners: {
                    click: {
                        fn: me.onDoneButtonClick,
                        scope: me
                    }
                }
            }
        ],
        listeners: {
            el: {
                blur: {
                    fn: me.onWindowLoseFocus,
                    scope:me
                }
            }               
        }
    });

Reference

• How to simulate onblur event for a Panel in Extjs
• ExtJS floating window focus lose detection