Search code examples
javascriptextjsextjs6tabpanel

tabPanel's tabBar (left, right) scroll icons in modern


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?


Solution

  • 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'
            }
        ]
        });