Ext JS 使分页工具栏变小答案

【问题标题】：Ext JS make paging toolbar smallerExt JS 使分页工具栏变小
【发布时间】：2023-03-21 19:43:01
【问题描述】：

我有一个非常简单的问题，但我似乎找不到简单的答案。事实上，我还没有找到任何答案如何使 Ext JS 网格的分页工具栏更小。

我做了一个非常简单的fiddle 来研究它是如何工作的，看起来ExtJS 在某些时候会动态计算分页工具栏中元素的位置。具体来说，设置了“左”css 属性。

所以我想知道如何调整计算这些值的函数，以便减少这些值。我可以使用 jQuery/Javascript 来执行此操作，但这听起来很错误，所以我更喜欢使用干净的 ExtJS 方式来执行此操作。

所以不要像这样......

我想看看这个：

例如，我的示例中的“上一页”按钮声明了一个内联 css 样式（很可能由分页工具栏小部件完成），左侧 41 像素，而分隔符图标具有相同的“左侧”样式 81 像素。这一直持续到工具栏的整个宽度被覆盖。

所以总结一下，我想要的是拦截计算并减少元素的值以降低工具栏的整个宽度。

欢迎提出任何建议。

【问题讨论】：

【解决方案1】：

首先设置按钮的宽度。

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

然后，您可以在按钮之前使用工具栏分隔符将元素向右移动：

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

【讨论】：

【解决方案2】：

我想我会发布我自己问题的答案。有一个配置可以在工具栏太小时启用水平滚动：

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

【讨论】：