Change tabPanel tabBar layout

[30081996]

Hello ! I kindly ask you for some little help if you know. I have a tabpanel with many tabs, and many tabs have long text, so the tabs are longer than the screen and in order to navigate through them. At then end of the row i have a left/right arrow to show more tab buttons. My question is: how i can show all the buttons one under the other, and all of them in one line if the screen size is exceeded?

This is how it looks now:
Capture.PNG
And i would like to show all tabs one under the other not needing to click on the right arrow to see the other tabs.
Thanks, and hope i explained it.

[Gary Schlosberg]

If you are asking for tabs on multiple lines, this is not supported in the framework. I think you'd have to override the bar's initComponent to adjust the layout and overflow handler. Here's an older thread that discusses some options.
https://www.sencha.com/forum/showthread.php?23660

[30081996]

thank you Gary! But i am not able to reproduce that in extjs 5.1

i used:

Ext.define('Mvp.ux.MultiRowTabPanel', {
extend: 'Ext.TabPanel',
onResize : function(){
Mvp.ux.MultiRowTabPanel.superclass.onResize.apply(this, arguments);

if(this.multipleRows && this.rendered) {
var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
var aw = this[ce].dom.clientWidth;
if (aw) {
this.strip.setWidth(aw - 4);
}
}
},

delegateUpdates : function(){
if (this.suspendUpdates) {
return;
}
if (this.resizeTabs && this.rendered) {
this.autoSizeTabs();
}
if (!this.multipleRows && this.enableTabScroll && this.rendered) {
this.autoScrollTabs();
}
if (this.multipleRows && this.rendered) {
this.fixHeight();
}
},

fixHeight:function()
{
var ce = this.tabPosition != 'bottom' ? 'header' : 'footer';
var ah = this[ce].dom.clientHeight;
if(!this.lastTabsHeight)
this.lastTabsHeight = ah;
if(this.lastTabsHeight != ah)
{
var diff = ah - this.lastTabsHeight;
this.lastTabsHeight = ah;
this.lastSize = null;
this.setHeight(this.getSize().height - diff);
}
}

});

but i get undefined for this[ce] at ---> var aw = this[ce].dom.clientWidth;

Any idea how can i solve this since there is no key either header either footer in that object? Thanks