Ext JS使分页工具栏更小

时间:2016-10-25 11:38:07

标签: javascript jquery css extjs

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

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

所以我想知道如何调整计算这些值的函数,这样我就可以减少这些值。我可以使用jQuery / Javascript来做到这一点,但这听起来很错,所以我更喜欢干净的ExtJS方式来做到这一点。

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

enter image description here

我想看到这个:

enter image description here

例如,上一页'我的示例中的按钮具有一个内联css样式(最有可能由分页工具栏小部件完成),左侧为41px,而分隔符图标为81px,相同的左侧'样式。这将继续,直到覆盖工具栏的整个宽度。

总而言之,我想要的是拦截计算并减少元素的值以降低工具栏的整个宽度。

欢迎任何建议。

2 个答案:

答案 0 :(得分:0)

首先设置按钮的宽度。

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

然后,您可以在按钮之前使用工具栏分隔符将元素移动到右侧:

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

这是您的corrected fiddle

答案 1 :(得分:0)

我想我会回答自己的问题。有一个配置,当工具栏太小时启用水平滚动:

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