Ext.form.Panel only works in fit layout

[dw12345]

It looks as though a form panel will only work correctly in a fit layout. Is this correct? I have wasted many hours trying to use a vbox layout.

This displays the form fields correctly

Ext.application({    
    name: 'app',
    launch: function(){
        var vp = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: 'fit'
        });
//         var hdr = Ext.create('Ext.TitleBar', {
//            title: 'test title'
//        });
         var fp = Ext.create('Ext.form.Panel', {
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                title: 'test panel header'
            },{
                xtype: 'textfield',
                name: 'name',
                label: 'Name'
            },{
                xtype: 'passwordfield',
                name: 'password',
                label: 'Password'
            }]
        });
//        vp.add(hdr);
        vp.add(fp);
    }
});

This displays the form fields correctly

Ext.application({    
    name: 'app',
    launch: function(){
        var vp = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: 'vbox'
        });
 //         var hdr = Ext.create('Ext.TitleBar', {
//            title: 'test title'
//        });
           var fp = Ext.create('Ext.form.Panel', {
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                title: 'test panel header'
            },{
                xtype: 'textfield',
                name: 'name',
                label: 'Name'
            },{
                xtype: 'passwordfield',
                name: 'password',
                label: 'Password'
            }]
        });
   //        vp.add(hdr);
        vp.add(fp);
    }
});

[mitchellsimoens]

It works, you just need to tell the form to have a height (notice red text):

Ext.application({    
    name: 'app',
    launch: function(){
        var vp = Ext.create('Ext.Panel', {
            fullscreen: true,
            layout: {
                type : 'vbox',
                align : 'stretch'
            }
        });
 //         var hdr = Ext.create('Ext.TitleBar', {
//            title: 'test title'
//        });
           var fp = Ext.create('Ext.form.Panel', {
            flex : 1,
            items: [{
                xtype: 'toolbar',
                docked: 'top',
                title: 'test panel header'
            },{
                xtype: 'textfield',
                name: 'name',
                label: 'Name'
            },{
                xtype: 'passwordfield',
                name: 'password',
                label: 'Password'
            }]
        });
   //        vp.add(hdr);
        vp.add(fp);
    }
});

align : 'stretch' will make the items fill the entire width. flex : 1 is the ratio of the parent's height, in this case since it is the only item it will fill the entire height.

[dw12345]

Thanks for your help

It would be good if flex: 1 were the default when using vbox/hbox layouts. Then sizing would only be needed if different sized components were required.