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);
});