title: Ext.js: How to align button to left on header?
body: <p>See fiddle here:
  <a href="https://fiddle.sencha.com/#view/editor&amp;fiddle/1u71" rel="nofollow noreferrer">https://fiddle.sencha.com/#view/editor&amp;fiddle/1u71</a></p>
  
  <p>How to align "test" button to left on Extjs header? </p>
  
  <p>When we delete the 'title' it renders as div tag with &amp;nbsp content.
  Please update solution because i have used "floating: true" which is moving the test button to left but complete header is in middle of page!</p>
  
  <pre><code>Ext.application({
      name: 'Fiddle',
      launch: function () {
          Ext.onReady(function () {
              Ext.create('Ext.panel.Panel', {
                  width: 500,
                  height: 500,
                  collapsible: true,
                  renderTo: Ext.getBody(),
                  header: {
                      titlePosition: 0,
                      title: "title",
                      items: [{
                          xtype: 'button',
                          text: 'test',
                          cls: 'lefty'
                      }]
                  }
              });
          });
      }
  });
  </code></pre>