add extjs 6.0.1 sources

[extjs.git] / extjs / modern / modern / src / grid / plugin / PagingToolbar.js

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