Ext JS 6 Modern Set TabBar Scrollable

By default in Ext JS 6 Modern version (or Sencha Touch), the TabPanel’s TabBar is not scrollable. That means if opened tabs is too many that the TabBar will push the earlier tabs to left side, then they will become invisible anymore (because it’s not scrollable)

To make it scrollable, we need set tabBar.scrollable config to true when creating TabPanel

Then we can drag the TabBar to scroll it.

 

By default the scrollable is 'horizontal' , and of course you can set it to 'vertical' .

 

 

 

  • Umid Abulkasimov

    I tested it in the fiddle. It is not working anymore.

  • http://www.techzoo.org tousif khan

    It don’t work with ExtJS modern v6.2. Can you add a working fiddle ?

  • Suman Mridha

    Yes, it works. You just have to make sure that all the tabs has a fixed width. I got this working like this:

    var tabs = tabPanel.getTabBar().getItems().items;

    tabs.forEach(function (tab) {

    tab.setWidth(tab.textElement.getTextWidth() + 60);

    });