1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      0  

    Default Answered: Tabindex with multiple components

    Answered: Tabindex with multiple components


    I was wondering if someone could point me in the direction of anything that could help with using tabIndex with multiple components. Right now I have a form that renders some search fields and contains a reset and search button. In addition this page also renders a grid with paging toolbar.

    The request is to have the tabIndex tab through all the search fields first, then the search and reset buttons. I have tried explicitly defining the tabIndex of each element in form and the issue is that when you place the cursor in the first search box and hit TAB it tabs down into the page # box of the paging toolbar on the grid. I have tried adding a tabIndex (I don't even think it supports it) to the pagingtoolbar that is one above the number I gave to the last element in my form, this did not work. I also tried giving it a below zero integer since I read that will make an element inaccessible to TAB but I'm assuming since it doesn't appear that the xtype supports that config it doesn't work.

    What is best practice for configuring or supporting a view that contains multiple components (form/grid, etc) and tab indexing? Let me know if a screenshot would be benficial of the layout.

  2. In creating the fiddle I fixed the problem. I for some reason in testing had assigned tabIndex: 0 to my first element. Readjusting the tabIndexes to start at 1 and properly assigning the order seems to have fixed the problem.

    Edit: Here's the fiddle link just in case someone finds it useful later since setting up an ExtJS Fiddle with Grid and Store isn't quick.

  3. #2
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      0  

    Default


    Still unable to solve this, anyone have any input?

  4. #3
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Answers
    130
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    If you could create a small testcase using sencha fiddle it would help a lot to play around with your configuration.

    I think the issue with the paging toolbar is, that it contains an input field (the one where you can enter the page). So by default, tabbing through the form will at some point land there.

    Try to add a tabIndex to that input field with a higher value and see if it helps.

    Also check if the buttons inside the paging toolbar also get accessed using tabbing.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  5. #4
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      1  

    Default


    I will work on the fiddle.

    The buttons inside the paging toolbar are being accessed with TAB (after the input field). How would you add tabIndex to the page # field of a paging toolbar xtype? It doesn't look like the config options for the pagingtoolbar support tabIndex at the xtype level.

  6. #5
    Sencha User tobiu's Avatar
    Join Date
    May 2007
    Location
    Munich (Germany)
    Posts
    2,684
    Answers
    130
    Vote Rating
    112
    tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all tobiu is a name known to all

      0  

    Default


    maybe the easier way to go is to replace the paged grid with an infinite scrolling one using a buffered store.

    to add the tabIndex to the paging toolbar items, take a look at:
    http://docs.sencha.com/extjs/4.2.1/s...toolbar-Paging

    you need to override:
    Code:
        /**
         * Gets the standard paging items in the toolbar
         * @private
         */
        getPagingItems: function() {
            var me = this;
    
            return [{
                itemId: 'first',
                tooltip: me.firstText,
                overflowText: me.firstText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-first',
                disabled: true,
                handler: me.moveFirst,
                scope: me
            },{
                itemId: 'prev',
                tooltip: me.prevText,
                overflowText: me.prevText,
                iconCls: Ext.baseCSSPrefix + 'tbar-page-prev',
                disabled: true,
                handler: me.movePrevious,
                scope: me
            },
            ...
    and add your tabIndex to the items.
    Best regards
    Tobias Uhlig
    __________

    S-CIRCLES Social Network Engine

  7. #6
    Sencha User
    Join Date
    Feb 2012
    Posts
    25
    Answers
    2
    Vote Rating
    4
    caleywoods is on a distinguished road

      1  

    Default


    In creating the fiddle I fixed the problem. I for some reason in testing had assigned tabIndex: 0 to my first element. Readjusting the tabIndexes to start at 1 and properly assigning the order seems to have fixed the problem.

    Edit: Here's the fiddle link just in case someone finds it useful later since setting up an ExtJS Fiddle with Grid and Store isn't quick.

Thread Participants: 1