Ext.form.Panel

    
Form panel class serves as the container for forms. You can add the controls in Ext.form.field package to the form panel class. The form panel provides support for processing form, validation etc.

Ext.create("Ext.form.Panel",
    {
        title: "Controls",
    items: [
    {
        xtype: "radiogroup",
        fieldLabel: "Title",
        vertical: true, columns: 1,
        items: [
        { boxLabel: "Mr", name: "title" },
        { boxLabel: "Ms", name: "title" }
        ]
    },
    {
        xtype: "textfield",
        fieldLabel: "Name",
        fieldLabel: "Name",
        allowBlank: false,
        maxLength: 50,
        msgTarget: "side"
    },
    {
        xtype: "datefield",
        fieldLabel: "Date of birth",
        msgTarget: "side"
    },
    {
        xtype: "textfield",
        fieldLabel: "Blog"
    },
    {
        xtype: "numberfield",
        fieldLabel: "Years of experience",
        minValue: 5,
        maxValue: 15
    },
    {
    xtype: "textarea",
    fieldLabel: "Address"
    },
    {
    xtype: "button",
    text: "Submit",
    listeners: {
        "click": function () { alert("yahoooooo"); }
    }
    }
    ],
    renderTo: Ext.getBody()
});

The form controls can be wired up with basic validation rules. For instance, the common validation properties of the text based controls are allowBlank, maxLength, minLength, and so on.

Another useful property called vtype can be used for using built-in validation rules like e-mail, URL, and so forth.
The blog text field we have used in our example can be configured to have a validation type as shown here.
{
xtype : "textfield",
fieldLabel : "Blog",
vtype : "url"
}