Question

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

我最初试图挂钩blur事件但是这个行为在ExtJS 5+ ie 中是不稳定的，并带有以下示例（{{3} }），尝试拖动或单击窗口外部。

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 ，这可以正常工作，但如果您尝试通过报头中。

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

Answer 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

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

1 个答案: