当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);
    }
});

Answer 2

我认为你可以在你的窗口中使用anchor layout，它有一个带有分页的网格toolbar.Here是anchor layout和anchor做的事情：