失去焦点时自动关闭 ExtJS 窗口

Posted 2023-02-26

【中文标题】失去焦点时自动关闭 ExtJS 窗口

【英文标题】：Automatically Close ExtJS Window When Losing Focus

【发布时间】：2016-08-19 09:42:30

【问题描述】：

我有一个可以在我的应用程序中打开的小窗口，它允许用户执行琐碎的任务，当用户在窗口外单击时我想简单地关闭它。一些示例建议在背景 "mask" 上监听点击事件 - 除了感觉有点 hacky 之外，这不是一个选项，因为该窗口未配置为 modal，因为它的功能不是-blocking，我不想限制它背后的UI。

我最初试图挂钩 blur 事件，但是在 ExtJS 5+ 即中的行为是喜怒无常的，下面的示例 (fiddle)，尝试在窗口外拖动或单击。

var win = Ext.create('Ext.window.Window', 
    width: 500,
    height: 250,
    items: 
        xtype: 'box',
        padding: 20,
        html: 'Test window...'
    
);
win.on('blur', win.close, win);
win.show();

在

5.1.0

到

5.1.1

中完全失败。 在

5.1.2

到

6.2.0

中，如果您尝试拖动标题。

是否有其他配置或解决这两个问题的简洁解决方案，跨版本？

【参考方案1】：

我没有与组件的focus 状态作斗争，而是选择了以下 MVC 设置，它侦听全局单击事件，然后确定用户是否单击了窗口。

Ext.define('App.window.DismissableWindow', 
    extend: 'Ext.window.Window',
    controller: 'dismissableWindow'
    // config ...
);

Ext.define('App.window.DismissableWindowController', 
    extend: 'Ext.app.ViewController',
    alias: 'controller.dismissableWindow',

    listen: 
        global: 
            mousedown: 'dismissWindowCheck'
        
    ,

    dismissWindowCheck: function(ev)
        var view = this.getView();
        if(!view.owns(ev.getTarget()))
            view.close();
    
);

» Fiddle