Results 1 to 4 of 4

Thread: How to select next record or select previous record in a grid with a paging toolbar

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    3

    Thumbs up How to select next record or select previous record in a grid with a paging toolbar

    I found the selectPrevious and selectNext functions from another user on this site, and am not sure who the original source was, but I put this class together to extend Ext.grid.Panel to include the useful functions selectNext and selectPrevious. These used to be in the selection model class I believe but there was nothing useful when I searched on this issue. I'm certain this isn't the best solution but it works for me and might help a few people out there so here it is. Note that the getBottomToolbar expects you to have a pagingtoolbar as a docked item in your grid; you may need to modify that.

    Code:
    Ext.define('MetaTools.lib.grid.Panel', {
        extend: 'Ext.grid.Panel',
        alias: 'widget.extendedgridpanel',
        /**
         * Select the previous row in current page, or the last
         * row of previous page if the first row is selected.
         *
         * records.index are form 0 to N
         * records select index are from 0 to pageSize -1
         * pageData limits are from 1 + (page-1)*pageSize to page*pageSize
         *
         * @param {Boolean} keepExisting True to retain existing selections.
         * @param {Boolean} suppressEvent Set to true to not fire a select event.
         */
        selectPrevious: function(keepExisting, suppressEvent) {
            var selModel = this.getSelectionModel(),
                last = selModel.getSelection()[0];
    
            if (last) {
                var pageData = this.getBottomToolbar().getPageData();
    
                if (last.index >= pageData.fromRecord) {
                    selModel.select(
                        last.index - pageData.fromRecord,
                        keepExisting, suppressEvent
                    );
                    return;
                }
    
                if (pageData.currentPage > 1) {
                    this.view.on('refresh', function(){
                            this.getSelectionModel().select(
                                this.getStore().getCount() - 1,
                                keepExisting, suppressEvent
                            );
                        },
                        this, {single: true}
                    );
                    this.getBottomToolbar().movePrevious();
                } else {
                    Ext.Msg.alert('Selection', 'First item reached.');
                }
            }
        },
        /**
         * Select the next row in current page, or the first
         * row of next page if the last row is selected.
         *
         * records.index are form 0 to N
         * records select index are from 0 to pageSize -1
         * pageData limits are from 1 + (page-1)*pageSize to page*pageSize
         *
         * @param {Boolean} keepExisting True to retain existing selections.
         * @param {Boolean} suppressEvent Set to true to not fire a select event.
         */
        selectNext: function(keepExisting, suppressEvent) {
            var selModel = this.getSelectionModel(),
                last = selModel.getSelection()[0];
    
            if (last) {
                var pageData = this.getBottomToolbar().getPageData();
    
                if (last.index < pageData.toRecord - 1) {
                    selModel.select(
                        last.index + 2 - pageData.fromRecord,
                        keepExisting, suppressEvent
                    );
                    return;
                }
    
                if (pageData.currentPage < pageData.pageCount) {
                    this.view.on('refresh', function(view){
                            view.getSelectionModel().select(0, keepExisting, suppressEvent);
                        },
                        this, {single: true}
                    );
                    this.getBottomToolbar().moveNext();
                } else {
                    Ext.Msg.alert('Selection', 'Last item reached.');
                }
            }
        },
        getBottomToolbar: function() {
            return this.dockedItems.findBy(function(item) {
                if (item.xtype == 'pagingtoolbar') {
                    return true;
                }
            }, this);
        }
    });
    Your grid definition might look like this:

    Code:
    //...
            xtype: 'extendedgridpanel',
                dockedItems: [{
                    xtype: 'pagingtoolbar',  
                    dock: 'bottom',
                    //...
                }],
    Hope that helps someone,

    Tony D

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    40,379

    Default

    Ext JS 4.1.0 Beta 1 now includes selectNext and selectPrevious methods that were there in 3.x but not in 4.0.x
    Mitchell Simoens @LikelyMitch

    Check out my GitHub:
    https://github.com/mitchellsimoens

    Posts are my own, not any current, past or future employer's.

  3. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    3

    Thumbs up

    Glad to hear it! I guess this can serve as a hold-over for people waiting for the release version like me then.

  4. #4
    Sencha Premium Member
    Join Date
    Dec 2010
    Posts
    27

    Default

    This is very helpful, thanks!

Posting Permissions

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