PDA

View Full Version : How to select next record or select previous record in a grid with a paging toolbar



AJD
17 Jan 2012, 5:55 PM
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
18 Jan 2012, 5:23 AM
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
18 Jan 2012, 8:30 AM
Glad to hear it! I guess this can serve as a hold-over for people waiting for the release version like me then.

AmandaK
20 Jan 2012, 10:16 AM
This is very helpful, thanks!