Last active
August 6, 2017 07:52
-
-
Save mcelotti/17dfbb5e966d90d32454 to your computer and use it in GitHub Desktop.
ExtJS6 Modern: Ext.grid.plugin.PagingToolbar that interacts with grid's store
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* When I first used the "Ext.grid.plugin.PagingToolbar" plugin with ExtJS6.2 modern I thought it could interact and load prev/next pages using the grid's store. | |
* The fact is that the pagingtoolbar does not interact with the store, it splits "pages" of data within the current grid data, but this is not what I was looking for. | |
* Therefore here's my attempt to extend the PagingToolbar and create a paging plugin that actually loads store pages according to the slider. | |
*/ | |
Ext.define('MyApp.util.GridPagingToolbar', { | |
extend: 'Ext.grid.plugin.PagingToolbar', | |
updateGrid: function (grid, oldGrid) { | |
this.callParent(arguments); | |
this.unbindHook(grid, 'onScrollBinder', 'checkPageChange'); | |
}, | |
onUpdateVisibleCount: function (grid) { | |
var store = grid.getStore(), | |
pageSize = store.getPageSize(), | |
totalPages = Math.ceil(store.getTotalCount() / pageSize); | |
this.setTotalPages(totalPages); | |
this.setPageSize(pageSize); | |
}, | |
onNextPageTap: function () { | |
var store = this.getGrid().getStore(); | |
if (store.currentPage * store.getPageSize() < store.getTotalCount()) { | |
var page = store.currentPage + 1; | |
this.setCurrentPage(page); | |
} | |
}, | |
onPreviousPageTap: function () { | |
var store = this.getGrid().getStore(); | |
if (store.currentPage > 1) { | |
var page = store.currentPage - 1; | |
this.setCurrentPage(page); | |
} | |
}, | |
onPageChange: function (field, page) { | |
var grid = this.getGrid(); | |
grid.getStore().loadPage(page, { | |
scope: this, | |
callback: function () { | |
var topRecord = this.getPageTopRecord(page); | |
grid.scrollToRecord(topRecord); | |
this.setCurrentPage(page); | |
} | |
}); | |
}, | |
updatePageButtons: function () { | |
// do nothing | |
} | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment