현대에 tabPanel의 tabBar (왼쪽, 오른쪽) 스크롤 아이콘

Question

tabBar이 tab 오버플로 될 때 extjs 6.5.2 classic에서 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

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

내가 뭔가를 놓치고 6.5.2 현대적인 예?

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