Question

这个问题是关于pagingtoolbar布局的。我的目标是在窗口大小改变时将其显示在窗口的底部。但现在当缩小窗口大小时，工具栏将被隐藏。 pageingtoolbar代码：

{
    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

如何在Extjs中更改窗口大小时显示“pagingtoolbar”？

2 个答案: