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

Ext.create('Ext.TabPanel', {
    margins : '2 0 0 0',
    width: '100%',
    deferredRender : false,
    tabBar: {
    	scrollable: true
    },
    activeTab : 0,
    items : [ something ]
});

Then we can drag the TabBar to scroll it.

By default the scrollable is

'horizontal'

'vertical'

The post Ext JS 6 Modern Set TabBar Scrollable appeared first on Redino blog.