如何在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