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.

Answer 2

TracKer's answer is correct, but he doesn't provide an explanation for why.

Here's my take at why you need scrollable:false.. If the formpanel IS scrollable, then you need to tell Sencha how big to make it (and within that size the user can scroll around it). However, if it's NOT scrollable, it will take up the entire space it's allowed, and to get to be bigger the user can scroll around to access it.

A bit confusing =\

Answer 3

I kind of switched around your code a little but here's what I came up with:

Ext.application({
name : 'TestApp',
requires: ['Ext.form.Panel', 'Ext.form.FieldSet'],
launch : function() {
    var paneltest = Ext.create('Ext.Panel', {
        fullscreen: true,
        layout: 'vbox',
        // layout: 'fit'  // This shows the form, but overlaps all 3 panel items.
        items : [
            {
                html : 'Fill in the form below',
                flex: 1
            },
            {
                xtype: 'formpanel',
                flex: 1,
                items : [
                    {
                        xtype : 'fieldset',
                        items : [{
                            xtype : 'textfield',
                            name : 'username',
                            label : 'Username'
                        }]
                    }
                ]
            }, 
            {
                html : 'Fill in the form above',
                flex: 1
            }
        ]
    });

    Ext.Viewport.add(paneltest);
}
});

My main change to your code was that I removed the

layout: {
    type: 'vbox',
    align: 'center'
  }

and I changed it to

layout: 'vbox'

I also added a flex to your elements. This is the proper way to use the vbox and hbox layouts. I'm not totally sure why this works, however it does look like 'center' is not a valid value you can give the align attribute. I think you are looking for 'middle'. And if that doesn't give you what you are wanting maybe try to add a class or id to your panel and control the alignment with css. Hope this helps.