Sencha Touch 2 FormPanel not showing up properly (layout issue?)

Question

I'm having trouble with the layout of a FormPanel in Sencha Touch 2. See example app below.

There should be a panel with 'vbox' layout containing 3 items: a piece of text, a FormPanel, and another piece of text. However the FormPanel seems to get size 0x0 and not show up at all, so I only see the two texts.

I found 2 things that get the form panel to show up:

1. Setting layout: 'fit' on the outer panel. But then everything overlaps. fit isn't really designed for more than one item, so this isn't a solution.

2. Settings explicit width and height config on the FormPanel. But I want it to layout itself and not have to specify this in pixels. Why would I need to do this?

I've tried a bunch of other random params, but I'm just shooting in the dark. So what am I missing?

Ext.application({
  name: 'TestApp',
  launch: function() {
    return Ext.Viewport.add({
      xtype: 'panel',
      layout: {
        type: 'vbox',
        align: 'center'
      },
      // layout: 'fit'  // This shows the form, but overlaps all 3 panel items.
      items: [
        { html: 'Fill in the form below' },
        {
          xtype: 'formpanel',
          // width: 300,  // These fixed sizes reveal the form, but why?
          // height: 300, // These fixed sizes reveal the form, but why?
          items: [
            {
              xtype: 'fieldset',
              items: [
                {
                  xtype: 'textfield',
                  name: 'username',
                  label: 'Username'
                }
              ]
            }
          ]
        },
        { html: 'Fill in the form above' }
      ]
    });
  }
});

Answer 1

Set scrollable property of your formpanel object to false, that will solve the problem.

{
  xtype: 'formpanel',
  scrollable: false,
  items: [
    {
      xtype: 'fieldset',
      items: [
        {
          xtype: 'textfield',
          name: 'username',
          label: 'Username'
        }
      ]
    }
  ]
},

Update. Please note, that in newer releases of Sencha (2.3) you will have to use scrollable: null, as noticed by Nathan Do in his comment to this answer. But since it's not documented feature in can be changed in the future.