Ext JS 4: Ext.Component focus and blur events

Question

I have been working on this simple test code, and I can't seem to get the focus and blur events to work properly. What I'm imagining is the user moving their mouse over the window (fires focus event), and then the user moves their mouse out of the window (fires blur event). Unfortunately, this is not the case, and maybe I'm just misunderstanding blur and focus.

Ext.create('Ext.window.Window', {
  height: 300,
  width: 300,
  title: 'blah',
  autoShow: true,
  listeners: {
    focus: function() {
      alert('focused!');
    },
    blur: function() {
      alert('blurred!');
    }
  }
});

Fiddle

Now, I did find this Stack post... very interesting that you can put el inside of listeners like that. Unfortunately, it looks like when the page loads, the window gains focus and then loses it right away... same if I hover over it. So I'm confused. The API says you can use focus and blur just like every other listener (no mentioning of wrapping it in el), but this post says you need to wrap it in el?

Answer 1

This is JavaScript 101, and I still get it wrong. Focus and blur are for when you click the element (gains view focus) and when you click out of the element (loses view focus), respectively. The only strange thing is, why does window.focus() not actually fire the focus event? It's most likely because it doesn't fire any events, but why is that? You would think a method called focus would fire the focus event.

Answer 2

You can use the focus and blur events with form fields.