title: Sencha Touch - Labels horizontally placed instead of vertically in a panel
body: <p>I want to place two labels, a textfield and a button in vertical layout.
  But the two labels are placed horizontally while textfield and button are placed vertically.</p>
  
  <p>label1 | label 2 | textfield/button</p>
  
  <p>I tried various layout options but non helped. Is there a fundamental error in my layout?
  Any suggestions?</p>
  
  <p>Code for Panel:</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define('MyApp.view.Demoview', {
  extend: 'Ext.Panel',
  xtype: 'demoview',
  fullscreen : false,
  config: {
      items : [ {
          docked : 'top',
          xtype : 'toolbar',
          title : 'A title'
      }, {
          xtype : 'panel',
          layout : {
              type : 'vbox',
              pack : 'center',
              align : 'center'
          },
          defaults : {
              margin : 5
          },
          items : [ {
              xtype : 'label',
              styleHtmlContent: true,
              height:'100px',
              html : 'label 1'
          }, {
              xtype: 'label',
              styleHtmlContent: true,
              height: '100px',
              html: 'label 2'
          }, {
              xtype : 'textfield',
              label: 'Name',
              required: true
          }, {
              xtype : 'button',
              itemId : 'demoButton',
              text : 'Button',
              ui : 'round'
          }]
      } ]
  }});
  </code></pre>
  
  <p>They are nested inside a container with card layout:</p>
  
  <pre class="lang-js prettyprint-override"><code>Ext.define('MyApp.view.Main', {
  extend : 'Ext.Container',
  requires : [ 'MyApp.view.Someview', 'MyApp.view.Demoview'],
  config : {
      fullscreen : false,
      layout : 'card',
      activeItem : 0,
      items : [ {
          layout : 'fit',
          xtype : 'somview'
      }{
          layout : 'fit',
          xtype : 'demoview'
      } 
  ]
  }});
  </code></pre>