Results 1 to 2 of 2

Thread: PagingToolbar keyboard navigation enhancement

  1. #1
    Sencha User JeffHowden's Avatar
    Join Date
    Mar 2007
    Location
    Forest Grove, OR
    Posts
    1,038
    Vote Rating
    1
      0  

    Default PagingToolbar keyboard navigation enhancement

    In PagingToolbar.js:

    Updated the following (line 41):

    Code:
            this.field.on("keydown", this.onEnter, this);
    to:

    Code:
            this.field.on("keydown", this.onPagingKeydown, this);
    Replaced the onEnter() method with this:

    Code:
        onPagingKeydown : function(e){
            if(e.getKey() == e.RETURN){
                var d = this.getPageData();
                var v = this.field.dom.value, pageNum;
                if(!v || isNaN(pageNum = parseInt(v, 10))){
                    this.field.dom.value = d.activePage;
                    return;
                }
                pageNum = Math.min(Math.max(1, pageNum), d.pages) - 1;
                this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
                e.stopEvent();
            }
            else if(e.getKey() == e.HOME || (e.getKey() == e.UP && e.ctrlKey) || (e.getKey() == e.PAGEUP && e.ctrlKey) || (e.getKey() == e.RIGHT && e.ctrlKey) || e.getKey() == e.END || (e.getKey() == e.DOWN && e.ctrlKey) || (e.getKey() == e.LEFT && e.ctrlKey) || (e.getKey() == e.PAGEDOWN && e.ctrlKey))
            {
              var d = this.getPageData();
              var pageNum = (e.getKey() == e.HOME || (e.getKey() == e.DOWN && e.ctrlKey) || (e.getKey() == e.LEFT && e.ctrlKey) || (e.getKey() == e.PAGEDOWN && e.ctrlKey)) ? 1 : d.pages;
              this.field.dom.value = pageNum;
              this.ds.load({params:{start: (pageNum - 1) * this.pageSize, limit: this.pageSize}});
              e.stopEvent();
            }
            else if(e.getKey() == e.UP || e.getKey() == e.RIGHT || e.getKey() == e.PAGEUP || e.getKey() == e.DOWN || e.getKey() == e.LEFT || e.getKey() == e.PAGEDOWN)
            {
              var d = this.getPageData();
              var v = this.field.dom.value, pageNum;
              var increment = (e.shiftKey) ? 10 : 1;
              if(e.getKey() == e.DOWN || e.getKey() == e.LEFT || e.getKey() == e.PAGEDOWN)
                increment *= -1;
              if(!v || isNaN(pageNum = parseInt(v, 10))) {
                this.field.dom.value = d.activePage;
                return;
              }
              else if(parseInt(v, 10) + increment >= 1 & parseInt(v, 10) + increment <= d.pages)
              {
                this.field.dom.value = parseInt(v, 10) + increment;
                pageNum = Math.min(Math.max(1, pageNum + increment), d.pages) - 1;
                this.ds.load({params:{start: pageNum * this.pageSize, limit: this.pageSize}});
              }
              e.stopEvent();
            }
        },
    What it do, you ask? Well, in short, it adds additional paging navigation via the keyboard when the input field has focus. The following is an approximate breakdown:

    • HOME moves to the first page
      PAGEDOWN or DOWN or LEFT with the CTRL key pressed moves to the first page
      PAGEDOWN or DOWN or LEFT with the SHIFT key pressed decrement the page number by 10
      PAGEDOWN or DOWN or LEFT decrement the page number by 1
      PAGEUP or UP or RIGHT increment the page number by 1
      PAGEUP or UP or RIGHT with the SHIFT key pressed increment the page number by 10
      PAGEUP or UP or RIGHT with the CTRL key pressed moves to the last pageEND moves to the last page


    The code is moderately tested, meaning I used the paging.html example as my implementation and tested it in IE6 and Firefox 2.0.[/list]

  2. #2
    Sencha User jack.slocum's Avatar
    Join Date
    Mar 2007
    Location
    New York, NY
    Posts
    6,956
    Vote Rating
    20
      0  

    Default

    Thank Jeff. I like it. I added it in with a few tweaks (like using local variables ).

Similar Threads

  1. TreeView Keyboard Navigation Issue
    By DennisD in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 22 Mar 2007, 4:56 PM
  2. Replies: 5
    Last Post: 7 Mar 2007, 3:15 AM
  3. Ext.PagingToolbar and Ext.ContentPanel
    By ericd in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 26 Feb 2007, 12:50 PM
  4. Small fix for PagingToolbar
    By gordon in forum Ext 2.x: Help & Discussion
    Replies: 1
    Last Post: 26 Feb 2007, 5:11 AM
  5. how to enable keyboard navigation in a viewer?
    By qiuyl in forum Ext 1.x: Help & Discussion
    Replies: 1
    Last Post: 13 Dec 2006, 7:15 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •