The source code

    Ext.onReady(function(){

        Ext.QuickTips.init();

        // turn on validation errors beside the field globally
        Ext.form.Field.prototype.msgTarget = 'side';

        var bd = Ext.getBody();

        /*
         * ================  Simple form  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});

        var simple = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form',
            bodyStyle:'padding:5px 5px 0',
            width: 350,
            defaults: {width: 230},
            defaultType: 'textfield',

            items: [{
                    fieldLabel: 'First Name',
                    name: 'first',
                    allowBlank:false
                },{
                    fieldLabel: 'Last Name',
                    name: 'last'
                },{
                    fieldLabel: 'Company',
                    name: 'company'
                }, {
                    fieldLabel: 'Email',
                    name: 'email',
                    vtype:'email'
                }, new Ext.form.TimeField({
                    fieldLabel: 'Time',
                    name: 'time',
                    minValue: '8:00am',
                    maxValue: '6:00pm'
                })
            ],

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });

        simple.render(document.body);

        /*
         * ================  Form 2  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 2 - Adding fieldsets'});

        var fsf = new Ext.FormPanel({
            labelWidth: 75, // label settings here cascade unless overridden
            url:'save-form.php',
            frame:true,
            title: 'Simple Form with FieldSets',
            bodyStyle:'padding:5px 5px 0',
            width: 350,

            items: [{
                xtype:'fieldset',
                checkboxToggle:true,
                title: 'User Information',
                autoHeight:true,
                defaults: {width: 210},
                defaultType: 'textfield',
                collapsed: true,
                items :[{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last'
                    },{
                        fieldLabel: 'Company',
                        name: 'company'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }
                ]
            },{
                xtype:'fieldset',
                title: 'Phone Number',
                collapsible: true,
                autoHeight:true,
                defaults: {width: 210},
                defaultType: 'textfield',
                items :[{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }
                ]
            }],

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });

        fsf.render(document.body);

        /*
         * ================  Form 3  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 3 - A little more complex'});

        var top = new Ext.FormPanel({
            labelAlign: 'top',
            frame:true,
            title: 'Multi Column, Nested Layouts and Anchoring',
            bodyStyle:'padding:5px 5px 0',
            width: 600,
            items: [{
                layout:'column',
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'htmleditor',
                id:'bio',
                fieldLabel:'Biography',
                height:200,
                anchor:'98%'
            }],

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });

        top.render(document.body);

        /*
         * ================  Form 4  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 4 - Forms can be a TabPanel...'});

        var tabs = new Ext.FormPanel({
            labelWidth: 75,
            border:false,
            width: 350,

            items: {
                xtype:'tabpanel',
                activeTab: 0,
                defaults:{autoHeight:true, bodyStyle:'padding:10px'},
                items:[{
                    title:'Personal Details',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',

                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jack'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Slocum'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',

                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                }]
            },

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });

        tabs.render(document.body);

        /*
         * ================  Form 5  =======================
         */
        bd.createChild({tag: 'h2', html: 'Form 5 - ... and forms can contain TabPanel(s)'});

        var tab2 = new Ext.FormPanel({
            labelAlign: 'top',
            title: 'Inner Tabs',
            bodyStyle:'padding:5px',
            width: 600,
            items: [{
                layout:'column',
                border:false,
                items:[{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'First Name',
                        name: 'first',
                        anchor:'95%'
                    }, {
                        xtype:'textfield',
                        fieldLabel: 'Company',
                        name: 'company',
                        anchor:'95%'
                    }]
                },{
                    columnWidth:.5,
                    layout: 'form',
                    border:false,
                    items: [{
                        xtype:'textfield',
                        fieldLabel: 'Last Name',
                        name: 'last',
                        anchor:'95%'
                    },{
                        xtype:'textfield',
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email',
                        anchor:'95%'
                    }]
                }]
            },{
                xtype:'tabpanel',
                plain:true,
                activeTab: 0,
                height:235,
                defaults:{bodyStyle:'padding:10px'},
                items:[{
                    title:'Personal Details',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',

                    items: [{
                        fieldLabel: 'First Name',
                        name: 'first',
                        allowBlank:false,
                        value: 'Jack'
                    },{
                        fieldLabel: 'Last Name',
                        name: 'last',
                        value: 'Slocum'
                    },{
                        fieldLabel: 'Company',
                        name: 'company',
                        value: 'Ext JS'
                    }, {
                        fieldLabel: 'Email',
                        name: 'email',
                        vtype:'email'
                    }]
                },{
                    title:'Phone Numbers',
                    layout:'form',
                    defaults: {width: 230},
                    defaultType: 'textfield',

                    items: [{
                        fieldLabel: 'Home',
                        name: 'home',
                        value: '(888) 555-1212'
                    },{
                        fieldLabel: 'Business',
                        name: 'business'
                    },{
                        fieldLabel: 'Mobile',
                        name: 'mobile'
                    },{
                        fieldLabel: 'Fax',
                        name: 'fax'
                    }]
                },{
                    cls:'x-plain',
                    title:'Biography',
                    layout:'fit',
                    items: {
                        xtype:'htmleditor',
                        id:'bio2',
                        fieldLabel:'Biography'
                    }
                }]
            }],

            buttons: [{
                text: 'Save'
            },{
                text: 'Cancel'
            }]
        });

        tab2.render(document.body);
    });