关于extjs4：当在Extjs中更改窗口大小时，如何显示” pagingtoolbar”？


How to show 'pagingtoolbar' when the window size changed in Extjs?

此问题与分页工具栏布局有关。
我的目标是每当窗口大小更改时，将其显示在窗口底部。
但是现在当减小窗口大小时，工具栏被隐藏了。
pageing工具条形码：

1
2
3
4
5
6
{
    xtype:'pagingtoolbar',
    store:'Users',
    dock:'bottom',
    displayInfo:true
}

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/**
* @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);
    }
});

I think you can use anchor layout in your window which has this grid with paging toolbar.Here is what anchor layout and anchor do : Anchor Layout