extjs - Extjs中窗口大小改变时如何显示 'pagingtoolbar'？

Question

这个问题是关于分页工具栏布局的。 我的目标是在窗口大小发生变化时在窗口底部显示它。 但是现在当缩小窗口大小时，工具栏被隐藏了。 分页工具栏代码:

{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}

Answer 1

首先，'pagingtoolbar' 不是布局也不是窗口，它是一个组件。这是我在早期 4.x 项目中使用的版本。您可能需要在某些时候对其进行调整，因为它是根据客户要求构建的。

/**
* @class Ext.ux..toolbar.Paging
* @extends Ext.toolbar.Toolbar
* Paging
*/
Ext.define('Ext.ux.toolbar.Paging', {
    extend: 'Ext.toolbar.Paging',
    alias: 'widget.pagebar',

    lastElements: 0,
    autoPagesize: true,

    initComponent: function () {
        var me = this;

        me.callParent(arguments);
        if (me.autoPagesize) {
            me.on('afterlayout', function (tb, layout, eOpts) {
                var grid = tb.up('grid');
                if (!grid)
                    grid = tb.up('grid');
                grid.on('resize', function (p, aw, ah, eo) {
                    var view = p.getView(),
                        height = view.getHeight(),
                        elements = Math.floor(height / 23);
                    if (me.lastElements == elements)
                        return;
                    me.lastElements = elements;
                    me.adjustPaging(elements);

                });
            }, me, { single: true });
        }

    },

    /**
    * @private recalcPage
    * recalculate the current page after the elements per page have changed
    * @param {Number} new elements per page count
    */
    recalcPage: function (ne) {
        var me = this,
            se = ((me.store.currentPage - 1) * me.store.pageSize) + 1,
            c = me.store.currentPage,
            e = me.store.pageSize;
        return Math.floor(se / ne) + 1;
    },

    /**
    * @private adjustPaging
    * recalculate the current page after the elements per page have changed
    * @param {Number} new elements per page count
    */
    adjustPaging: function (newElements) {
        var me = this,
            newPage = me.recalcPage(newElements);
        me.store.pageSize = newElements;
        me.store.loadPage(newPage);
    }
});