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

0
votes

I've been working on this task for a while now and can't get it work. Basically I have this window that I'm able to toggle when clicking on "toggle button", but I'm trying to close window when user clicks anywhere outside the window and I'm not having any luck with it. Can anyone point me in the right direction? I found a solution but it's uses ExtJS 6, and I'm using version 4.1. Thanks a lot in a advance!

Here's my code:

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

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

}

Here's LIVE DEMO

Now, I found this code that works but it uses Extjs 6.

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

This is the LINK to this version using Extjs 6

2
extjsextjs4.1

2 Answers

3
votes

Try this instead.

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);
           }
        }
    }
  });

UPDATE

Included Ext.getCmp(this.id).setVisible(false); in the blur event.

UPDATE

Use mousedown event instead of click because it envoke before blur.

 button.mon(button.getEl(), { 

    'mousedown': function() {

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

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

    }

  });

If you want to toggle with enterkey press on button. Then include keydown event also.

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]);
      }
    }
  }
});

If you use keydown event don't forgot to add enableKeyEvents config to true in button definition.

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

Here is the working fiddle.

1
votes

As Gokul's answer you can add a blur event on el and hide the window. Whereas while toggling visible property is not modified so you have to make it as false to avoid double click.

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

Here is the working fiddle