Ext.form.Layout Layout--column Layout

Form Layout Ext.onready (function () {var panel = ext.create ("Ext.form.Panel", {width:550, title
        : "Simple Information registration" formlayout panel ", bodystyle:" padding:10px 10px 10px 10px ", LabelAlign:" Center ",
            ID: "Form", RenderTo:Ext.getBody (), items: [{autoheight:true, Layout: ' column ',
                Items: [{columnwidth:.50, xtype: "FieldSet", Title: "Personal Information", 
                    Layout: "Form", Style: "margin-left:2px;padding-left:5px", fielddefaults:{
                    Labelwidth:70, LabelAlign: "Left"}, items: [ {fieldlabel: "name", ID: "UserName", Allowblank:false,xtype: "TextField"}, {Fieldlab EL: "Communication Address", ID: "UserAddress", Allowblank:false,xtype: "TextField"}, {fieldlabel: "Email", ID: "User Email ", VType:" Email ",Allowblank:false,xtype: "TextField"}, {fieldlabel: "Age", ID: "Userage", Xtype: "Numberfield", MAXV
                alue:100, minvalue:0, Allowblank:false}]}, {columnWidth:. 49, Xtype: "FieldSet", Title: "Enterprise Information", Layout: "Form", Style: "Margin-lef T:5px;padding-left:5px ", Fielddefaults: {labelwidth:70, Labelal IGN: "Left"}, items: [{fieldlabel: "Company name", ID: "Cmpname", Allowblank:false
                , Xtype: "TextField"}, {Fieldlabel: "Company Address", ID: "Cmpaddress", Allowblank:false,xtype: "TextField"},  {fieldlabel: "email", ID: "Cmpemail", VType: "Email", Allowblank:false,xtype: "TextField"}, { 
        Fieldlabel: "Registration Time", ID: "Cmpregtime", Xtype: "Datefield", Allowblank:false,format: "Y-m-d"}]} }], butTons: [{text: ' OK ', handler:function () {var form = Ex
                    T.GETCMP ("form"). GetForm ();
                        if (Form.isvalid ()) {var userName = ext.getcmp ("UserName"). GetValue ();
                        var useraddress = ext.getcmp ("UserAddress"). GetValue ();
                        var useremail = ext.getcmp ("UserEmail"). GetValue ();

                        var userage = ext.getcmp ("Userage"). GetValue ();
                        var cmpname = ext.getcmp ("Cmpname"). GetValue ();
                        var cmpaddress = ext.getcmp ("cmpaddress"). GetValue ();
                        var cmpemail = ext.getcmp ("Cmpemail"). GetValue ();
                        
                        var cmpregtime = ext.getcmp ("Cmpregtime"). GetValue (); Ext.MessageBox.alert ("Hint", "personal registration information for:<br/>" + userName + ",<br/>" + useraddress + ",<br/>" + UserEmail + ", <br/> "+ Userage +" <br/> Enterprise registration Information for:<br/> "+ cmpname +",<br/> "+ cmpaddress +", &L
                    T;br/> "+ cmpemail +",<br/> "+ cmpregtime);
                    }}}, {text: "Cancel", Handler:function () {
                EXT.GETCMP ("form"). GetForm (). reset ();
}
            }
        ]
    }); });

The interface effect is as follows:

Non-null validation

Email format Verification

After clicking the button