当 Extjs 中的窗口大小发生变化时如何显示“分页工具栏”？

Posted 2023-02-26

【中文标题】当 Extjs 中的窗口大小发生变化时如何显示“分页工具栏”？

【英文标题】：How to show 'pagingtoolbar' when the window size changed in Extjs?

【发布时间】：2013-05-29 06:28:19

【问题描述】：

这个问题是关于分页工具栏布局的。 我的目标是在窗口大小发生变化时将其显示在窗口底部。 但是现在当减小窗口大小时，工具栏是隐藏的。 分页工具条码：

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

【参考方案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);
    
);

【参考方案2】：

我认为您可以在窗口中使用 anchor 布局，该布局具有带有分页工具栏的网格。这是 anchor layout 和 anchor 的作用：Anchor Layout