PDA

View Full Version : How to create focusable BoxComponent?



dbassett74
12 Aug 2010, 3:06 PM
I'm not sure if this is possible, but I'm hoping it is. I'm currently working on a custom component extending from BoxComponent. In order to support navigation with just the keyboard (like tabbing), I want to somehow make this custom component focusable. So that when the user hits the tab key and this component is next to get focus, it somehow gets focus and I can do something, like modify the class to make the border change colors, etc. Then, once this component has the "focus", it can handle key events, like key down, etc.

Any help on this would be appreciated.

Animal
12 Aug 2010, 9:28 PM
As an <a href="#"> as the main element.

This is the usual way of doing this in HTML 4

aconran
13 Aug 2010, 11:00 AM
You can maintain an anchorEl as Nige has suggested above or you can set the top level div's tabIndex to -1. This will enable you to get keyboard events on that particular div and programatically focus it.

dbassett74
14 Aug 2010, 3:18 PM
You can maintain an anchorEl as Nige has suggested above or you can set the top level div's tabIndex to -1. This will enable you to get keyboard events on that particular div and programatically focus it.

I tried your suggestion, but it doesn't seem that tabbing works. For example, I placed three of my custom components on the screen and set autoEl to:



autoEl: {
tag: "div",
tabIndex: -1
}


Although a focus rectangle now appears around the component when I click on it with the mouse, if I tab, it does not tab to the next custom component. Would Animal's way allow normal tabbing?

dbassett74
14 Aug 2010, 3:22 PM
As an <a href="#"> as the main element.

This is the usual way of doing this in HTML 4

How do I specify <a href="#"> for the autoEl of the BoxComponent? I couldn't get it to work with:



autoEl: {
tag: 'a',
src: Ext.BLANK_IMAGE_URL,
cls: 'x-image-button',
href: "#"
}

dbassett74
14 Aug 2010, 3:32 PM
I figured out the correct syntax for the href:



autoEl: {
src: Ext.BLANK_IMAGE_URL,
cls: 'x-image-button',
html: '<a href="#">'
}


BUT, the focus rectangle is no longer showing. I think this is okay though. However, I need some how to know the control has the focus. I currently have a click event successfully handle such as:



onRender: function(ct, position) {
this.autoEl = Ext.apply({}, this.initialConfig, this.autoEl);
MyWidget.superclass.onRender.apply(this, arguments);
this.el.on('click', this.onClick, this);
}


How do I also hook up an event handler for "focus" and "keydown" so I can capture key events?

dbassett74
14 Aug 2010, 4:42 PM
I found that if I put tabIndex: 0, it now tabs through the components. However, I still can't figure out how to attach a onFocus event to my component. Any help with that would be appreciated.

Animal
14 Aug 2010, 11:40 PM
Your first way was correct. The autoEl has to be an 'a'

Capture all events when they bubble. Have the Container which manages all these Components manage the keyboard and mouse gestures.