Ext.form.Panel is not visible

[btoc007]

The following code shows the foo and bar panel but the Ext.form.Panel sandwiched between the two is not visible. Any ideas?

Ext.application({
    name: 'Sencha',


    launch: function() {
        Ext.create("Ext.Panel", {
            fullscreen: true,
            layout: 'vbox',
            items: [
                Ext.create('Ext.Panel', {
                	html: 'foo'
                }),
                Ext.create('Ext.form.Panel', {
        			items: [{
            	        name : 'username',
            	        label: 'Username',
            	        xtype: 'textfield'
            	    }, {
            	        name : 'password',
            	        label: 'Password',
            	        xtype: 'passwordfield'
            	    }]
            	}),
            	Ext.create('Ext.Panel', {
                	html: 'bar'
                }),
            ]
        });
    }
});

[btoc007]

If I set flex to 1 for all items then it is rendered. In S1 though it use to render and the height of each item was the height of the content. What is confusing is it does it for Panel but not form.Panel.

[TommyMaintz]

That is probably because the form panel is scrollable, and scrollable items can't have auto-height. Try setting scrollable: false on your form panel. You could also just give your form panel a flex of 1.

[btoc007]

That seems to fix it