tabPanel 的 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

想通了。 kitchensink.

中有一个 Overflow Scroller Example Tabs

傻我

发布它是为了帮助遇到同样问题的人。

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

tabPanel 的 tabBar（左、右）现代滚动图标

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

javascript

extjs

extjs6

tabpanel