1. #1
    Sencha User
    Join Date
    Feb 2009
    Posts
    11
    Vote Rating
    0
    kngai is on a distinguished road

      0  

    Default Can't tab (keyboard navigate) focus to Grid Panel component

    Can't tab (keyboard navigate) focus to Grid Panel component


    In my HTML page, I have these components in the following DOM order:
    1. Standard HTML radio buttons in a fieldset
    2. ExtJS Form Panel with 3 combo boxes
    3. Basic ExtJS Grid Panel with single Row Selection
    4. Standard HTML button with event to remove a row in grid panel
    Keyboard navigation is a must for me due to our accessibility requirements. I can tab through all the components except for the Grid Panel; the focus skips from (2) to (4). Specifically, I need to be able to keyboard Up/Down to make row selection. Currently I can only do this with mouse down on a row first before Up/Down works.

    In ExtJS 3, I was able to tab focus to the grid panel, then add event handlers for keyboard UP/DOWN to select rows. I can't figure out how to achieve something similar in version 4.
    I know there are other threads related to keyboard navigation on Grid Panels, but could not find anything related to tab focusing a grid panel and then row select using Up/Down keys.

    Help much appreciated.

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,075
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    Please review the following:
    http://www.sencha.com/forum/showthread.php?249591

    Scott.

  3. #3
    Sencha User
    Join Date
    Feb 2009
    Posts
    11
    Vote Rating
    0
    kngai is on a distinguished road

      0  

    Default Works but very unnatural. Also found strange behaviour, which TAB focuses correctly.

    Works but very unnatural. Also found strange behaviour, which TAB focuses correctly.


    I've actually enabled the FocusManager:
    Code:
    Ext.FocusManager.enable({focusFrame: true});
    Not sure if that is enough. Either way, TABing through the DOM order still skips the grid panel. Am I missing a key configuration here?

    It does work when I am focused on a ComboBox, press ESC (to focus the form panel), then press TAB will it then focus the grid panel. But this is simply unnatural.



    Strangely, I simply tried adding the grid panel as a component in the form panel so I have the items in the following order:
    1. ComboBox (Selection here loads selections for ComboBox #2 and #3)
    2. ComboBox (Selection here adds to grid panel store)
    3. ComboBox (Selection here adds to grid panel store)
    4. Grid Panel
    As soon as I make a selection in ComboBox #3 and then TAB right away (while grid panel is adding the selection to store), it strangely gives focus to the Grid Panel correctly.