Keyboard navigation

[Qarea]

I need to implement keyboard navigation in my app. I've decided to use Ext.util.KeyNav in controllers to map different hotkeys to components (ie make focus on grid or panel), but I also need full keyboard navigation for components. Is there any out-of-box solutions for grid keyboard navigation?
Is there any simple ways to assign hotkey for button on component, possible looking like this:

 tbar: [
        {
            text: 'Add Object',
            action: 'add',
            keyEvent: 'alt+A' // This is smth that I need
        },
    ] 

[jsakalos]

It seems that you need Ext.KeyMap, not Ext.KeyNav. Take a look at binding and if it doesn't resolve, keep asking.

[Qarea]

Yes, KeyMap, thanks. But main question - I have to fully implement keyboard navigation for grid and panel, or is there any solutions to simplify rough work? Is there any quick way to add hotkey for button on panel? Or I have to manually create and configure KeyMap for each component?

[jsakalos]

Yes, you can add a binding ad-hoc calling addBinding method of KeyMap.

[Qarea]

Found Ext.FocusManager - and it is perfect solution for navigation in components.

Looks like I can use focus manager to focus required component, and that implement keyboard navigation(selecting/editing grid/tree row and hotkeys for different actions ) for each component using KeyMap. Can it be problem if I'll have hundreds of components each with KeyMap ?

[jsakalos]

I haven't tried it in that broad scale but I do not expect any big troubles as this won't modify the DOM. Modifying DOM is usually slowest in many browsers.

[Qarea]

Started work with FocusManager, but looks like it has some issues with TreePanel. Please help solve them:

As working example we can use Feed Viewer(the only example of focusmanager usage that I fount) http://docs.sencha.com/ext-js/4-1/#!...ed-viewer.html

There is east panel with 3 feeds - and user is able to user arrows keys to select feed - perfect. But if only change this panel from grid to tree key navigation breaks - pressing arrows makes both select prev/next tree item, and change focus to prev/next component.

[jsakalos]

I've been playing with http://docs.sencha.com/ext-js/4-1/ex...ed-viewer.html for a while and I do not see any problems. Can you tell us which specific steps to execute to trigger the problem you mention?

[Qarea]

Better to show using simple-tasks example
Add some tasks, select them in list (either in east or center) and try to use up/down arrows to navigate them. You'll see that pressing down up arrow both selects upper task and moves focus to upper element

[Qarea]

Hey, can anybody help me to solve this problem? It fully breaks FocusManager functionality for grid