/** */Ext.define('Ext.grid.plugin.PagingToolbar', { extend: 'Ext.Component', alias: 'plugin.gridpagingtoolbar', mixins: ['Ext.mixin.Hookable'], requires: [ 'Ext.Toolbar' ], config: { grid: null, currentPage: 1, totalPages: 0, pageSize: 0, totalCount: 0, toolbar: { xtype: 'toolbar', docked: 'bottom', ui: 'gray', cls: Ext.baseCSSPrefix + 'grid-pagingtoolbar', items: [{ xtype: 'button', ui: 'plain', iconCls: Ext.baseCSSPrefix + 'grid-pagingtoolbar-prev', action: 'previouspage' }, { xtype: 'component', role: 'currentpage', width: 20, cls: Ext.baseCSSPrefix + 'grid-pagingtoolbar-currentpage' }, { xtype: 'component', role: 'totalpages', width: 50, tpl: ' / {totalPages}' }, { xtype: 'singlesliderfield', value: 1, flex: 1, minValue: 1, role: 'pageslider' }, { xtype: 'button', ui: 'plain', iconCls: Ext.baseCSSPrefix + 'grid-pagingtoolbar-next', action: 'nextpage' }] } }, init: function(grid) { var me = this; me.setGrid(grid); grid.container.add(me.getToolbar()); if (grid.getStore().getCount()) { me.updatePageInfo(me.getCurrentPage()); } }, updateGrid: function(grid, oldGrid) { var me = this; if (oldGrid) { oldGrid.un({ updatevisiblecount: 'onUpdateVisibleCount', scope: me }); oldGrid.getStore().un({ add: 'onTotalCountChange', remove: 'onTotalCountChange', refresh: 'onTotalCountChange', scope: me }); me.unbindHook(grid, 'onScrollBinder', 'checkPageChange'); } if (grid) { grid.on({ updatevisiblecount: 'onUpdateVisibleCount', scope: me }); grid.getStore().on({ add: 'onTotalCountChange', remove: 'onTotalCountChange', refresh: 'onTotalCountChange', clear: 'onTotalCountChange', scope: me }); me.bindHook(grid, 'onScrollBinder', 'checkPageChange'); } }, checkPageChange: function() { var me = this, grid = me.getGrid(), pageSize = me.getPageSize(), currentPage = me.getCurrentPage(), totalCount = me.getTotalCount(), topVisibleIndex = grid.topVisibleIndex, newPage = Math.floor(grid.topVisibleIndex / pageSize) + 1; if (topVisibleIndex && newPage !== currentPage) { me.preventGridScroll = true; me.setCurrentPage(newPage); me.preventGridScroll = false; } }, applyToolbar: function(toolbar) { if (toolbar && !toolbar.isComponent) { toolbar = Ext.factory(toolbar, Ext.Toolbar); } return toolbar; }, updateToolbar: function(toolbar) { var me = this; if (toolbar) { me.currentPage = toolbar.down('component[role=currentpage]'); me.totalPages = toolbar.down('component[role=totalpages]'); me.pageSlider = toolbar.down('sliderfield[role=pageslider]'); me.nextPageButton = toolbar.down('button[action=nextpage]'); me.previousPageButton = toolbar.down('button[action=previouspage]'); me.pageSlider.on({ change: 'onPageChange', drag: 'onPageSliderDrag', scope: me }); me.nextPageButton.on({ tap: 'onNextPageTap', scope: me }); me.previousPageButton.on({ tap: 'onPreviousPageTap', scope: me }); me.currentPage.element.createChild({ tag: 'span' }); } }, onPageChange: function(field, value) { this.setCurrentPage(value); }, onPageSliderDrag: function(field, slider, value) { this.setCurrentPage(value); }, onNextPageTap: function() { var nextPage = this.getCurrentPage() + 1; if (nextPage <= this.getTotalPages()) { this.setCurrentPage(nextPage); } }, onPreviousPageTap: function() { var previousPage = this.getCurrentPage() - 1; if (previousPage > 0) { this.setCurrentPage(previousPage); } }, onTotalCountChange: function(store) { this.setTotalCount(store.getCount()); }, onUpdateVisibleCount: function(grid, visibleCount) { visibleCount -= 1; var store = grid.getStore(), totalCount = store.getCount(), totalPages = Math.ceil(totalCount / visibleCount); this.setTotalPages(totalPages); this.setPageSize(visibleCount); }, updateTotalPages: function(totalPages) { var me = this; // Ensure the references are set me.getToolbar(); me.totalPages.setData({ totalPages: totalPages }); me.pageSlider.setMaxValue(totalPages || 1); me.updatePageInfo(me.getCurrentPage()); }, updateCurrentPage: function(currentPage) { this.updatePageInfo(currentPage); }, updateTotalCount: function(totalCount) { var totalPages; if (totalCount !== null && totalCount !== undefined) { if (totalCount === 0) { totalPages = 1; } else { totalPages = Math.ceil(totalCount / this.getPageSize()); } this.setTotalPages(totalPages); } }, updatePageButtons: function() { var me = this, currentPage = me.getCurrentPage(); me.previousPageButton.setDisabled(currentPage === me.getTotalPages()); me.nextPageButton.enable(currentPage === 1); }, getPageTopRecord: function(page) { var grid = this.getGrid(), store = grid && grid.getStore(), pageSize = this.getPageSize(), pageTopRecordIndex = (page - 1) * pageSize, pageTopRecord = store && store.getAt(pageTopRecordIndex); return pageTopRecord; }, privates: { updatePageInfo: function(currentPage) { var me = this, grid = me.getGrid(), pageTopRecord; // Ensure the references are set me.getToolbar(); // TODO: Calling setHtml causes a performance issue while live scrolling, // this might be worth looking into. me.currentPage.element.dom.lastChild.innerHTML = currentPage; me.pageSlider.setValue(currentPage); pageTopRecord = me.getPageTopRecord(currentPage); if (grid && !me.preventGridScroll && pageTopRecord) { grid.scrollToRecord(pageTopRecord); } me.updatePageButtons(); } }});