title: Add custom css class to ExtJS 4.0.7 Panel header
body: <p>I'm trying to find a way to add a custom css class to an Ext.panel.Panel using a <code>title</code>. </p>
  
  <p>Using a basic Ext panel:</p>
  
  <pre><code>new Ext.panel.Panel({
      title: 'Test',
      items: []
  });
  </code></pre>
  
  <p>The <code>title</code> property triggers a header with a series of classes based off of <code>x-panel-header</code>. In older versions of Ext, I've read about using both a <code>header</code> and <code>headerCfg</code> property to customize the panel header properties but they both seem absent from 4.0.7</p>
  
  <p>I also tried building a custom <code>Ext.panel.Header</code>, and added it as a <code>dockedItem</code>, but it renders with an entirely different set of classes and doesn't behave like the "default" header.</p>
  
  <pre><code>dockedItems: [
      new Ext.panel.Header({
          title: 'Test',
          cls: 'emp-panel-header-alt'
          })
      ]
  </code></pre>
  
  <p>It renders with the following classes:</p>
  
  <p><code>x-container emp-panel-header-alt x-container-default x-horizontal x-container-horizontal x-container-default-horizontal x-top x-container-top x-container-default-top x-unselectable x-docked x-docked-top x-container-docked-top x-container-default-docked-top</code></p>
  
  <p>However, the auto-generated header has the panel header classes:</p>
  
  <p><code>x-panel-header x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-unselectable x-docked x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top</code></p>
  
  <p>Also tried adding a class post-instantiation:</p>
  
  <p><code>myPanel.header.addClass("some-custom-class") 
  // Doesn't work, .header not valid</code></p>
  
  <p><code>myPanel.getHeader().addClass("some-custom-class") 
  // getHeader() valid, but returns undefined</code></p>