ExtJS floating window focus lose detection

问题

I am wondering whether there is an efficient way to detect whether a floating window loses focus or not. I have a floating window for user's temporary inputs, what I want to do is automatically hiding this window if user forgot to hide it after input operation (e.g., clicks at elsewhere). I tried to use blur event on window's element, but nothing happened. a working demo: demo

thanks for any idea!

回答1:

This can be achieved adding blur event to ext window element, below is the sample code

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

回答2:

Before you can detect if the window has been blurred or not, you'll need some action to blur a window in the first place. You mentioned that you'd like a window to blur if a user "clicks elsewhere"; you can accomplish this by adding a listener to your mainPanel:

var mainPanel = new Ext.Panel({ //define a main non-floating panel
    title: 'main',
    id: 'mainPanel',
    width: 400,
    height: 400,
    listeners: {
        afterrender: function(self) {
            self.body.on('click', function() {
                alert('clicked')
            });
        }
    }

});

Once the panel body has been clicked, you can blur floatWin so the events it is listening for actually fire.

来源：https://stackoverflow.com/questions/9143777/extjs-floating-window-focus-lose-detection