ExtJS 浮动窗口焦点丢失检测答案

【问题标题】：ExtJS floating window focus lose detectionExtJS 浮动窗口焦点丢失检测
【发布时间】：2012-02-04 19:25:30
【问题描述】：

我想知道是否有一种有效的方法来检测浮动窗口是否失去焦点。我有一个用于用户临时输入的浮动窗口，如果用户在输入操作后忘记隐藏它（例如，点击其他地方），我想做的是自动隐藏这个窗口。我尝试在窗口元素上使用模糊事件，但什么也没发生。一个工作演示：demo

感谢您的任何想法！

【问题讨论】：

标签： extjs focus window blur floating

【解决方案1】：

这可以通过在ext窗口元素中添加模糊事件来实现，下面是示例代码

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

【讨论】：

【解决方案2】：

在您检测窗口是否已经模糊之前，您首先需要一些操作来模糊窗口。您提到如果用户“点击其他地方”，您希望窗口模糊；您可以通过向 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')
            });
        }
    }

});

单击面板主体后，您可以模糊 floatWin，以便它正在侦听的事件实际触发。

【讨论】：

感谢您的回复。但是，它仅适用于 mainPanel 的主体。在我的真实应用中，还有其他几个容器，包括其他一些浮动容器，我认为为每个容器注册“点击”事件不是一个好主意。