title: Layout with Sencha Touch
body: <p>Below is the code of a view in our project. I want a formpanel and a button in a vbox layout. I want to center the button horizontally.</p>
  
  <pre><code>Ext.define('Coder.view.membership.Login', {
      extend: 'Ext.Container',
      xtype: 'membershiploginview',
  
      requires: ['Ext.field.Password'],
  
      config: {
          title: 'Membership',
          layout: {
              type: 'vbox',
              align: 'center',
              pack: 'center'
          },
          items: [
              {
                  xtype: 'formpanel',
                  items: [
                      { xtype: 'textfield', name: 'userName', label: 'User ID' },
                      { xtype: 'passwordfield', name: 'password', label: 'Password' }
                  ],
                  height: 300,
                  flex: 1
              },
              { xtype: 'button', text: 'Login' }
          ]
      }
  })
  </code></pre>
  
  <p>With this configuration, the formpanel takes all available space vertically but none of the controls in it are visible. I can see the button centered horizontally where the formpanel ends. Why can't I see the controls in the formpanel? </p>