Tab panel with items that don't fit the width of the panel

Question

I am facing an issue where the tabs don't fit the entire width of the panel, and the user has to scroll to the right to view the rightmost tabs.

To see what I mean, please can go to this Sencha example, add enough tabs to enable the scrolling in the tab header.

My questions:

1. Is there a way to make the tabs wrap rather than having the scrolling effect?
2. Is there a plugin that can be used to create a dropdown menu/list with all the tabs or perhaps with the tabs that are not visible on the top right corner?
3. Is there a way to configure the table panel such that when I click on the > button on the right side to scroll the tab items, they scroll enough to make the next item visible instead of scrolling in small increments?

Ultimately, I could simulate the tab panel by adding a toolbar and buttons, and using the cardlayout. That would be my plan B.

Thank you

Update: I can set the flex: 1 property for each tab (inside tabConfig). I still have to figure out tooltips and enable the elipsis on the longer tabs that get chopped off.

Answer 1

There is a tabBar config for tabpanels, see here. Within this you can set layout properties, including overflowHandler, and one possible value is menu. This will do what you asked for in question 2. Add this config to tabpanel definition:

tabBar: {
    layout: {
        overflowHandler: 'menu'
    }
}