ExtJS Horizontal Scroll bars blocking tab titles in TabPanel - google-chrome

Question

This is an issue I've had a hard time researching and tracking down. When loading the following panel in a view, scroll bars appear on each tab title (not one long scroll bar for all of the tabs, but individual tab titles). It's not a huge issue for me since I'm on Mountain Lion with small scroll bars, but other users on older OS X versions have the huge blue scroll bars that block the entire tab title.
I'll post a screenshot when I get one, but here's the code:
Ext.define('App.view.case.CasePanel', {
extend: 'Ext.panel.Panel',
alias : 'widget.case-panel',
title : 'Edit Case',
layout: 'fit',
border: false,
autoScroll: true,
constrainHeader: true,
initComponent: function() {
this.items = [{
xtype: 'panel',
autoScroll: true,
layout: 'border',
items: [{
region: 'west',
xtype: 'case-edit-case-info',
split: true,
border: true,
width: 300
},{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
autoScroll: true,
border: false,
defaults: {border:false, bodyStyle:'padding:5px'},
items: [{
title: 'One',
xtype: 'case-edit-tab-one' // these aren't the actual tab names, but you get the idea.
},{
title: 'Two',
xtype: 'case-edit-tab-two'
},{
title: 'Three',
xtype: 'case-edit-tab-three'
},{
title: 'Four',
xtype: 'case-edit-tab-four'
},{
title: 'Five',
xtype: 'case-edit-tab-five'
},{
title: 'Six',
xtype: 'case-edit-tab-six'
},{
title: 'Seven',
xtype: 'case-edit-tab-seven'
}]
}]
}];
this.bbar = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
action: 'cancel'
}];
this.callParent(arguments);
}
});
Any ideas as to why it's doing this?
(Mac OS X, latest Chrome version)

Answer 1

Try to remove autoScroll from the first panel:
initComponent: function() {
this.items = [{
xtype: 'panel',
autoScroll: true,
layout: 'border',
...
}]
}