tabParel tabBar (слева, справа) иконки прокрутки в современном

Question

В extjs 6.5.2 classic, когда tab переполняет tabBar набор значков прокрутки создается слева и справа от tabBar,

Похоже, что такая же функциональность не реализована в extjs 6.5.2 modern.

extjs 6.5.2 классический пример

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 современный пример

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

Я что-то пропустил?

Answer 1

Догадаться. В кухонной раковине были вкладки с примерами переполнения.

Дурак я.

Размещать его, чтобы помочь кому-то с той же проблемой.

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