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

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

我认为你可以使用锚布局在您的窗口，它有这个网格分页toolbar.Here是什么锚布局和锚做：Anchor Layout