Ext JS使分頁工具欄更小

我有一個非常簡單的問題，但我似乎找不到一個簡單的答案。事實上，我還沒有找到任何答案如何使Ext JS網格的分頁工具欄更小。Ext JS使分頁工具欄更小

我做了一個非常簡單的fiddle來研究它是如何工作的，看起來在某些時候ExtJS會動態計算分頁工具欄中元素的位置。具體來說就是設置'left'css屬性。

所以我想知道如何調整計算這些值的函數，以便我可以減少這些值。我可以使用jQuery/Javascript來做到這一點，但這聽起來錯了，所以我更喜歡乾淨的ExtJS方式來做到這一點。

因此，而不是像這樣...

我想看到這一點：

例如，我的樣品中的 '前一頁' 按鈕有一個內聯css風格聲明（最有可能由分頁工具欄小部件完成），左側爲41px，而分隔符圖標爲相同「左」風格的81px。這繼續直到工具欄的整個寬度被覆蓋。

所以得出結論，我想要的是截取計算並減少元素的值以降低工具欄的整個寬度。

任何建議將受到歡迎。

2016-10-25 hbulens

因此，您想將按鈕移動到右側？或者你想減小這個工具欄的大小？（工具欄和按鈕的高度都是可編輯的） –

@Ludovic我想減小工具欄的大小，所以將元素擠在一起多一點。 – hbulens

所以你只需要減小你的工具欄的大小或其中的每個元素的大小與'高度'屬性 –

以爲我已經回答張貼到我自己題。有一個配置可以在工具欄變得太小時啓用水平滾動：

Ext.create('Ext.PagingToolbar', { 
    overflowHandler: 'scroller' 
}

2017-03-29 17:09:28 hbulens

首先設置按鈕的寬度。

new Ext.Button({ 
    width: 100, <<== width of the button 
    text: 'Smaller paging toolbar', 
    // ...

然後，你可以只是你的按鈕之前，你的元素移動到一個工具欄分隔符的權利：

[ 
    {xtype: 'tbseparator', width: 200 }, 
    new Ext.Button({ 
    // ...

2016-10-25 11:51:30

這似乎沒有任何效果，我對你的管理感到非常驚訝。爲什麼高度對工具欄中單個項目的寬度有任何影響？ – hbulens

@hbulens你是對的我誤解了你的問題。看到我編輯的答案 –

這是沒有辦法接近我的問題的答案。 – hbulens

回答