title: ExtJS Horizontal Scroll bars blocking tab titles in TabPanel
body: <p>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.</p>
  
  <p>I'll post a screenshot when I get one, but here's the code:</p>
  
  <pre><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);
      }
  });
  </code></pre>
  
  <p>Any ideas as to why it's doing this?</p>
  
  <p>(Mac OS X, latest Chrome version)</p>