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

[AJD]

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.

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:

//...
        xtype: 'extendedgridpanel',
            dockedItems: [{
                xtype: 'pagingtoolbar',  
                dock: 'bottom',
                //...
            }],

Hope that helps someone,

Tony D

[mitchellsimoens]

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

[AJD]

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

[AmandaK]

This is very helpful, thanks!