View Full Version : How to determine what component currently has the focus?

23 Dec 2010, 1:47 PM
Is there any way to know this (without adding a focus event handler to every component in my app, and keeping track of it that way)?

My particular use-case is that I need to set the focus to a particular window, but only if a form field on that window doesn't already have the focus.

Oh well, even adding a focus event handler to every component doesn't work. If the target component is on a window, the window activate event happens before the component's focus event, so at the time I need to make the decision to focus the window or not, I don't yet know what component just got the focus.

Trying with document.activeElement (apparently now supported by all current browsers), even though lots of info I found seems to think otherwise. Gotta love outdated information!

No joy... by the time the window's activate event fires, the window has already become the active element. Alas, there's no 'beforeactivate' event. In the Window source, only the setActive function fires the 'activate' event, but I can't find what calls it when the window is clicked on.

23 Dec 2010, 5:05 PM
I'm not sure about keeping track of all elements on the page, but Ext.form.Field already has a private hasFocus field. If you want to find out which field on a form has focus, you could just iterate over all of the fields on the form checking this attribute. Of course, the onBlur of Field sets this to false, so if you're actually initiating the blur event by clicking somewhere else on the page it might not work for you...

24 Dec 2010, 1:14 AM
You don't have to put a focus handler on all elements; you just have to put one on the document and check the event target.

24 Dec 2010, 2:12 AM
The DOM focus event does not bubble.

The new DOMFocusIn event does. Where supported.

The Observable focus event of Ext.form.Field may be requested to bubble.

24 Dec 2010, 2:14 AM
You can stop a Window from stealing focus by setting its defaultButton to something which does not accept focus. eg

defaultButton: {
getEl: Ext.emptyFn,
focus: Ext.emptyFn

24 Dec 2010, 2:18 AM
No, 'focus' doesn't bubble, but it does capture (need to be able set the capture flag when registering the event - still not possible in Core!).

28 Dec 2010, 9:08 AM
@Condor: Is this what you had in mind? If so, I'm not getting any events when I click on various focusable items in the viewport.

Ext.get(document).on('focus', function(event, target) {
x8.log('GLOBAL FOCUS: %o %o', event, target);
}, this);

Nor does this (same thing, I suppose):

Ext.getBody().on('focus', function(event, target) {
x8.log('GLOBAL FOCUS: %o %o', event, target);
}, this);

28 Dec 2010, 12:11 PM
No, I meant this (http://www.sencha.com/forum/showthread.php?74974-DISCUSS-Support-focusin-and-focusout-events).

6 Jan 2014, 11:18 AM
I was able to grab the id of the focused EXT element by using:


Though I stopped using that method because I was trying to have a button fire that event, and as soon as the button was clicked, it had the focus. But maybe someone else can find it useful.