Автоматическое закрытие окна ExtJS при потере фокуса

Question

У меня есть небольшое окно, которое можно открыть в моем приложении, которое позволяет пользователю выполнять тривиальные задачи, когда пользователь щелкает за пределами окна, которое я хотел бы просто закрыть. Некоторые примеры предполагают прослушивание события щелчка на фоне «маска» - кроме ощущения взлома, это не вариант, потому что окно не настроено как modal, так как его функциональность не блокирует, я не хотите ограничить интерфейс пользователя.

я был первоначально пытался зацепить на 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   это работает, но неожиданно закрывается при попытке перетаскивания заголовком.

Есть ли другая конфигурация или аккуратное решение, которое охватывает обе проблемы, кросс-версию?

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