Thank you for reporting this bug. We will make it our priority to review this report.
  1. #1
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default Keyboard navigation

    Keyboard navigation


    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:
    PHP Code:
     tbar: [
            {
                
    text'Add Object',
                
    action'add',
                
    keyEvent'alt+A' // This is smth that I need
            
    },
        ] 

  2. #2
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


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

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  3. #3
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


    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?

  4. #4
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


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

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  5. #5
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


    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 ?

  6. #6
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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.
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  7. #7
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


    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.

  8. #8
    Sencha - Community Support Team jsakalos's Avatar
    Join Date
    Apr 2007
    Location
    Slovakia
    Posts
    27,521
    Vote Rating
    378
    jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future jsakalos has a brilliant future

      0  

    Default


    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?
    Jozef Sakalos, aka Saki

    Education, extensions and services for developers at new http://extjs.eu
    News: Grid Search Plugin, ExtJS 5 Complex Data Binding using MVVM


  9. #9
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


    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
    Attached Files

  10. #10
    Ext JS Premium Member
    Join Date
    Nov 2011
    Posts
    200
    Vote Rating
    7
    Qarea is on a distinguished road

      0  

    Default


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

Thread Participants: 1