In extjs 6.5.2 classic when a tab
overflows the tabBar
a set of scroll icons is being created on the left and right of the tabBar
.
It seems that the same functionality is not implemented in extjs 6.5.2 modern.
extjs 6.5.2 classic example
Ext.create('Ext.tab.Panel', {
width: 300,
height: 200,
activeTab: 0,
scrollable: true,
items: [
{
title: 'Tab 1',
bodyPadding: 10,
html : 'A simple tab'
},
{
title: 'Tab 2',
html : 'Another one'
},
{
title: 'Tab 3',
html : 'Another one'
},
{
title: 'Tab 4',
html : 'Another one'
},
{
title: 'Tab 5',
html : 'Another one'
},
{
title: 'Tab 666666666666666666666666666666666666666666',
html : 'Another one'
}
],
renderTo : Ext.getBody()
});
extjs 6.5.2 modern example
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'top',
tabBar: {
scrollable: true //makes the tabBar scrollable when the device is tablet. No scroll icons created though.
},
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact 1',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 2',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 3',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 4',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 5',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 6666666666666666666666666',
iconCls: 'user',
html: 'Contact Screen'
}
]
});
Am i missing something?
Figured it out. There was an Overflow Scroller Example Tabs in kitchensink.
Silly me.
Posting it in order to help someone with the same problem.
Ext.create('Ext.TabPanel', {
requires: [
'Ext.layout.overflow.Scroller'
],
fullscreen: true,
shadow: 'true',
tabBar: {
layout: {
pack: 'start',
overflow: 'scroller'
}
},
defaults: {
scrollable: true,
layout: 'center',
//userCls: 'card',
tab: {
minWidth: 100
}
},
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Home Screen'
},
{
title: 'Contact 1',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 2',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 3',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 4',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 5',
iconCls: 'user',
html: 'Contact Screen'
},
{
title: 'Contact 6666666666666666666666666',
iconCls: 'user',
html: 'Contact Screen'
}
]
});