View Full Version : Focus/control movement on pressing 'tab' or 'enter'

16 Jun 2014, 12:08 AM

The way control moves from one widget to another is a bit different in extJS if we keep pressing 'tab'.
To enter in a region/container or to highlight a widget present inside a container we need to press 'enter' and 'esc' to come out.
Can we override this behaviour of extjs? Can we control this focus movement on our own?

Also, for grouping controls/widgets I use 'Container' class. To move amongst the widgets if we keep pressing tab or enter, ExtJS focuses such components also which are only used for right arrangement of main widgets.
Is there a way to focus only the child elements and not the container component?

If you do know anything in this regard, please let me know.
Thanks in advance.

23 Jun 2014, 8:01 AM
Most controls should have a tabIndex property that you'd use to set the order of "tabbing" through controls in a container.

If you want custom keyboard control, to implement your own non-standard techniques for users to navigate your forms (not recommended), then you will probably have to setup a keyboard listener and keep track of where the user is in order to provide custom behaviour. Definately doable, but I'd recommend checking to make sure that you really want to override the default behaviour.

You might also want to do some research on Web Accessibility, and Designing for Accessibility using ARIA. Standard and consistent keyboard navigation is key to a successful & accessible UI. Though you may not be targetting the Blind/Low Vision community, the techniques still apply.