tabPanelのタブバー（左、右）スクロールアイコン

Question

tabBarがtabをオーバーフローするextjs 6.5.2クラシックでは、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にあります。

愚かな私。

同じ問題を抱えている人を助けるために投稿してください。

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