Как закрыть окно при нажатии вне окна в ExtJS 4.1?

Question

Я уже некоторое время работаю над этой задачей и не могу заставить ее работать.По сути, у меня есть это окно, которое я могу переключать при нажатии «кнопка переключения» , но я пытаюсь закрыть окно, когда пользователь нажимает в любом месте за пределами окна, и мне не везет сЭто.Может кто-то указать мне верное направление?Я нашел решение, но оно использует ExtJS 6, и я использую версию 4.1.Заранее большое спасибо!

Вот мой код:

button.on('click', function() {
if (myWindow.isVisible()) {
    myWindow.hide();

  } else {
    myWindow.show();
    myWindow.alignTo(Ext.getBody(), "tr-tr", [-10, 10]);
  }
 }, this);

}

Вот LIVE DEMO

Теперь я нашел этот код, который работает, но он использует Extjs 6.

Ext.create('Ext.window.Window', {
float: true,
width: 300,
height: 200,
listeners: {
    focusleave: function (cmp) {
        cmp.close();
    }
},
renderTo: Ext.getBody()
}).show();

Это LINK к этой версии с использованием Extjs 6

Answer 1

В ответ Гокуля вы можете добавить событие blur на el и скрыть окно.В то время как переключение видимого свойства не изменяется, поэтому вы должны сделать его ложным, чтобы избежать двойного щелчка.

el: {
   blur: function () {
       myWindow.hide();
       myWindow.setVisible(false);
   }          
}

Здесь - это рабочая скрипка

Answer 2

Попробуйте вместо этого.

var myWindow = Ext.create('Ext.window.Window', {
    modal: false,
    height: 300,
    width: 300,
    closeAction: 'hide',
    listeners: {
    el: {
        blur: function () {
           this.hide();
           this.setVisible(false);
           }
        }
    }
  });