CODEWITHSUNDEEP
extjsextjs6
serg
serg

Reputation: 111315

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

If a tab panel has too many tabs a little scroll bar appears so you can scroll through the tabs, see fiddle.

If I move the tabs into a header (uncomment tabBarHeaderPosition: 1 from fiddle), the scrollbar won't appear anymore.

Is there a way to make tabs scrollable inside the header?

Upvotes: 0

Views: 811

Answers (1)

Kevin Collins
Kevin Collins

Reputation: 1461

Setting a flex for the tabBar seems to work. Also adding flex to the title can give tab bar more 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'
    }]
});

Upvotes: 1

Related Questions