ExtJS TabPanel标签宽度适配问题：换行、下拉菜单、滚动优化方案问询

1. 标签自动换行替代滚动效果 #

关闭TabBar默认的滚动溢出处理，将布局配置为可换行的hbox布局即可，参考配置：

Ext.create('Ext.tab.Panel', {
  // 其他基础配置省略
  tabBar: {
    overflowHandler: null, // 关闭默认滚动逻辑
    layout: {
      type: 'hbox',
      wrap: true // 开启标签自动换行
    }
  }
})

2. 标签下拉菜单实现 #

无需引入额外插件，ExtJS原生支持下拉式溢出处理，直接配置overflowHandler为menu即可在标签栏右侧自动生成按钮，点击展开所有未完全显示的标签：

Ext.create('Ext.tab.Panel', {
  // 其他基础配置省略
  tabBar: {
    overflowHandler: 'menu'
  }
})

如果需要展示全部标签而非仅隐藏标签，可以自行在TabPanel的头部工具区添加自定义按钮，遍历TabPanel的items集合生成全量标签菜单，绑定点击切换逻辑即可。

3. 调整滚动步长实现完整展示单个标签 #

在滚动模式下，修改overflowHandler的scrollStep参数即可调整每次滚动的距离，将数值设置为略大于单标签最大宽度，即可实现每次点击滚动按钮完整露出下一个标签：

Ext.create('Ext.tab.Panel', {
  // 其他基础配置省略
  tabBar: {
    overflowHandler: {
      type: 'scroller',
      scrollStep: 220, // 可根据业务场景下的标签平均宽度调整数值
      animate: true
    }
  }
})

如果需要动态适配不同宽度的标签，可以重写scroller的scrollBy方法，计算下一个未完全展示标签的偏移量作为滚动距离。

4. 长标签溢出省略+Tooltip配置 #

在你已配置的tabConfig: {flex: 1}基础上，新增文本溢出和tooltip相关配置即可：

Ext.create('Ext.tab.Panel', {
  // 其他基础配置省略
  tabConfig: {
    flex: 1,
    overflow: 'hidden',
    textOverflow: 'ellipsis', // 超出宽度自动显示省略号
    tooltip: {
      renderer: function(tip, tab) {
        tip.update(tab.text); // tooltip展示标签完整文本
      }
    }
  }
})

如果需要全局生效，可以直接为Ext.tab.Tab类配置默认属性，无需每个TabPanel单独设置。

内容的提问来源于stack exchange，提问作者boggy