PDA

View Full Version : Window focus and blur events.



incutonez
14 Mar 2014, 9:00 AM
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 (https://fiddle.sencha.com/#fiddle/49f)

Now, I did find this Stack post (http://stackoverflow.com/questions/9143777/extjs-floating-window-focus-lose-detection)... very interesting that you can put el inside of listeners like that. But 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?

dawesi
15 Mar 2014, 8:08 AM
mouseover/mouseout and alike are element events, not component events. focus and blur are to do with clicking on the component or toggling it into view, not hover states.




onWindowShow : function(component,eOpts) {

var windowEl = component.getEl():

windowEl.on('mouseover', function(e,t) { console.log('mouseover window') });
windowEl.on('mouseout', function(e,t) { console.log('mouseout window') });
}

incutonez
17 Mar 2014, 5:11 AM
Hmm, yeah, I think that's what was confusing me. Even with that piece of knowledge though, doing a window.focus() does not make the alert appear... I really have no idea how you would make use of focus or blur.

dawesi
17 Mar 2014, 10:43 PM
you need to do a window.show(), not window.focus to get the alert to appear above.

incutonez
18 Mar 2014, 5:02 AM
you need to do a window.show(), not window.focus to get the alert to appear above.

I'm sorry, but does it make sense that window.focus() doesn't work? To me it doesn't, but whatever. You've solved my issue. Thanks.