有没有办法让选项卡面板中的选项卡可滚动，并在 ExtJS6 中设置 tabBarHeaderPosition？

Question

如果选项卡面板有太多选项卡，则会出现一个小滚动条，以便您滚动选项卡，请参阅 fiddle。

如果我将选项卡移动到 header（从 fiddle 取消注释 tabBarHeaderPosition: 1），滚动条将不再出现。

有没有办法让选项卡在 header 内滚动？

Answer 1

为 tabBar 设置 flex 似乎有效。另外给title加上flex可以让tab bar更多space。

https://fiddle.sencha.com/#view/editor&fiddle/23vc

Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    activeTab: 2,
    renderTo: document.body,
    title: {
        text: 'Title',
        flex: .2
    },
    tabBarHeaderPosition: 1,
    tabBar: {
        flex: .8
    },
    items: [{
        title: 'Foo'
    }, {
        title: 'Bar'
    }, {
        title: 'some tab'
    }, {
        title: 'another tab'
    }, {
        title: 'tab 1'
    }, {
        title: 'final tab'
    }, {
        title: 'Foo'
    }, {
        title: 'Bar'
    }, {
        title: 'some tab'
    }, {
        title: 'another tab'
    }, {
        title: 'tab 1'
    }, {
        title: 'final tab'
    }]
});

有没有办法让选项卡面板中的选项卡可滚动，并在 ExtJS6 中设置 tabBarHeaderPosition？

Is there a way to have tabs in a tab panel scrollable with tabBarHeaderPosition set in ExtJS6?

extjs

extjs6