Example: keyboard navigation

Skin:

Simple Tree

Fake input:

Fake listbox: (Note that we can TAB over it without selecting or TAB on it and then press DOWN to select. A selected item is dimmed on blur.)

Try TAB and cursor keys to navigate the grid.
Node title is focusable, so we can TAB to a context where SPACE, LEFT, BACK, '-', '+', ... work
Setting focus inside an input activates the node.
Note: tabbing from outside into the tree will now activate the first node, (used to be the last active node). Setting 'tabbable' only to the active node wouldn't help, because the first row contains a tabbable input element anyway.
TODO: focusout is not reliably detected for the container (should dimm active node in Win8 skin)
TODO?: gridnav currently assumes that cells contain only one embedded :input
TODO: ext-gridnav could be dropped and merged into core and ext-table instead
TODO: css should be modified to remove the system focus border from node titles (currently theme dependant)

Fake input:

	#		Ed1	Ed2	Rb1	Rb2	Cb

Typical use case is passing 'input' tags as part of the title.
There may be many different constructs (one or more embedded controls, inside of after title span, ...). So we handle this with custom event handlers instead of built-in magic.
The input controls can keep their own key handling because we return `preventNav` in the `keydown` event.
Tree navigation is mapped to SHIFT + original_key by calling `node.navigate()` in the `keydown` event.
We bind to `focusin` of embedded :input controls, so we can activate the associated node.
on node `activate` we set focus to the embedded input.
TODO: css should be modified to remove the system focus border from node titles (currently theme dependant)

Fake input: