View Full Version : How to catch focus on Tab button (or activate on focus)

12 Dec 2011, 1:34 PM
End result I'm after is for keyboard access in a tab bars to behave like a normal OS tabbed dialog where the tab panel is activated when its tab button receives focus.

I assumed I could set up a listener for the focus event on tabs. Obviously each tab is comprised of several child components for the tab button and the content panel so a focus definition in the tab config doesn't work. My next thought is to navigate the DOM and try attaching a focus handler to the BUTTON element but that feels like it wouldn't be the 'extjs way'...

I've been thru the API docs for tab Panels, Bars, Tabs, Buttons and nothing is jumping out at me. Any help is appreciated.


12 Dec 2011, 3:00 PM
I'm unclear on exactly what you want... but I think you might have success using the Ext.Element() class:
- http://docs.sencha.com/ext-js/4-0/#!/api/Ext.Element

From any component, you can call the following to the it's Element:

var panel = new Ext.panel.Panel({ ... });

panel.el //Ext.Element

The Element class gives you access to a number of native DOM events (like "focus"), so I think this gives you what you're after.

13 Dec 2011, 7:11 AM
So let's say I have a TabPanel which contains the following Tabs:

var myTab1 = Ext.create('Ext.tab.Tab', {
title: 'Tab 1',
html: 'Some content'
var myTab2 = Ext.create('Ext.tab.Tab', {
title: 'Tab 2',
html: 'Some content'

I'm new to ExtJS so I'm probably missing something but I've been unable to attach a focus event handler to either myTab1 or myTab1.el. myTab1.addListener('activate'...) works but not for 'focus'.

I'm using FocusManager. When the user activates the tab list, the TAB key cycles between tabs and ENTER activates the focused tab. Instead, I'd like to activate the tab immediately on focus. When the user hits TAB to focus Tab2, Tab2 should be activated and its content displayed.

In pseudo-code: myTab2.on('focus', myTab2.activate()). Does that make sense?

13 Dec 2011, 7:28 AM
After thinking through your problem a bit more, I don't know if the tabs in the tab bar (what I assume you're trying to focus on) are the same DOM elements as the tabs themselves, so it's very possible that this doesn't do what you expect:

myTab.el.on('focus', function() { ... })

In other words, the tabs (in the tab bar) are different Ext.Element objects than the tabs (panels) themselves.

myTab.el //underlying DOM of the panel... NOT the clickable (focus-able) tab in the tab bar

You might try using the DomQuery class to select the tabs (in the tab bar) and add the Element "focus" listeners that way. Make sense?

15 Dec 2011, 7:14 AM
Thanks, that's kind of where my mind was going originally it just seemed like it was stepping too far outside the framework. I've finally been able to select the tab buttons and capture focus changes using DomQuery.select().