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

Posted 2023-02-26

【中文标题】在 ExtJS 4.1 中单击外部窗口时如何关闭窗口？

【英文标题】：How to close window when clicking outside window in ExtJS 4.1?

【发布时间】：2019-09-28 03:54:17

【问题描述】：

我从事这项任务已经有一段时间了，但无法完成。基本上我有这个窗口，当我点击 “切换按钮” 时我可以切换它，但是当用户点击窗口外的任何地方时我试图关闭窗口并且我没有任何运气用它。谁能指出我正确的方向？我找到了一个解决方案，但它使用 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();

这是使用 Extjs 6 的此版本的 LINK

【参考方案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]);
      

    

  );

如果你想用 enterkey 切换按钮。然后也包括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 是工作小提琴。

【讨论】：

您的解决方案很有效，但是当我想再次打开窗口时，我必须双击。任何想法如何解决这个问题？谢谢

您的解决方案仍然需要双击。无法正常工作

切换被你的解决方案破坏了

您的 jsfiddlle 不起作用。按钮上的切换功能已损坏

好的。用详细的解释更新了答案。检查这个 jsfiddle jsfiddle.net/5nwhm24x

【参考方案2】：

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

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

Here 是工作小提琴

【讨论】：

您的解决方案仍然需要双击。无法正常工作

切换被你的解决方案破坏了