在 ExtJS 4.1 中单击外部 window 时如何关闭 window？

Question

我已经处理这个任务一段时间了，但无法完成。基本上我有这个 window，我可以在点击 "toggle button" 时切换，但我试图在用户点击时关闭 window window 之外的任何地方，我都没有运气。谁能指出我正确的方向？我找到了一个解决方案，但它使用的是 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

试试这个。

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

更新

在模糊事件中包含 Ext.getCmp(this.id).setVisible(false);。

更新

使用 mousedown 事件而不是点击事件，因为它在模糊之前调用。

 button.mon(button.getEl(), { 

    'mousedown': function() {

      if (myWindow.isVisible()) {
        myWindow.hide();

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

    }

  });

如果您想使用回车键切换，请按下按钮。然后还包括 keydown 事件。

button.getEl().on({
  scope: this,
  keydown: function(e, obj) {
   if(e.keyCode===13) {
      if (myWindow.isVisible()) {
        myWindow.hide();

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

如果您使用 keydown 事件，请不要忘记在按钮定义中将 enableKeyEvents 配置添加为 true。

  var button = Ext.create('Ext.button.Button', {
    text: 'Toggle Window',
    enableKeyEvents:true,
    renderTo: Ext.getBody()
 });

Here 是有效的 fiddle.

Answer 2

作为 Gokul 的回答，您可以在 el 上添加一个 blur 事件并隐藏 window。而切换可见时属性未被修改，因此您必须将其设置为 false 以避免双击。

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

Here 是有效的 fiddle

在 ExtJS 4.1 中单击外部 window 时如何关闭 window？

How to close window when clicking outside window in ExtJS 4.1?

extjs

extjs4.1