我有一个可以在我的应用程序中打开的小窗口,它允许用户执行琐碎的任务,当用户在窗口外单击时,我想简单地关闭它。一些示例建议在后台 “mask” 上监听点击事件 - 除了感觉有点老套之外,这不是一个选项,因为窗口未配置为 modal
因为它的功能是非阻塞的,所以我不想限制它背后的 UI。
我最初尝试 Hook 到 blur
事件,但是在 ExtJS 5+ i.e. 中行为是不稳定的,示例如下 ( 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 中,这有效,但如果您尝试拖动标题。
是否有一些其他配置或巧妙的解决方案涵盖这两个问题,跨版本?
最佳答案
我没有与组件的 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();
}
});
关于javascript - 失去焦点时自动关闭 ExtJS 窗口,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39035846/