CSS Effect of extjs and use of panel combined with traditional layout and form submission

I. beautification form:
The csseffect of extjscan make the table very beautiful. Before using ext-all.css, import the ext-all.css file to the page, and then add the following code

 

 

<Div class = "X-Box-ML">
<Div class = "X-Box-Mr">
<Div class = "X-Box-MC">
<Form ID = "regform">
<Fieldset align = "Middle">
<Legend> <font class = "btitle" color = "# ff7300"> <strong class = "style7"> account information </strong> </font> </legend>
<Table width = "100%" align = "center">
<Tr>
<TD style = "text-align: Right">
Member Email:
</TD>
<TD style = "text-align: Left" width = "300">
<Input type = "text" id = "useremail" name = "useremail"/> & nbsp; <span id = "MSG" style = "display: none "> </span>
</TD>
</Tr>
<Tr>
<TD style = "text-align: Right">
Logon password:
</TD>
<TD style = "text-align: Left">
<Input id = "userpwd" name = "userpwd" type = "password"/>
</TD>
</Tr>
<Tr>
<TD style = "text-align: Right">
Password confirmation:
</TD>
<TD style = "text-align: Left">
<Input id = "userpwd1" name = "userpwd1" type = "password"/>
</TD>
</Tr>
</Table>
</Fieldset>
<Div id = "regbutton">
</Div>
</Form>
</Div>
</Div>
</Div>
<Div class = "X-Box-Bl">
<Div class = "X-Box-Br">
<Div class = "X-Box-BC">
</Div>
</Div>
</Div>

Ii. Binding and verification forms:
The above only shows the form. If you need to operate the form field, you also need to write the relevant code in Js for binding.

VaR FM2 = new Ext. Form. basicform ('regform ');
// Add the verification box
Fm2.add (New Ext. Form. textfield ({
Allowblank: false, // cannot be blank
Blanktext: 'email cannot be blank. Make sure the address is valid! ',
// RegEx: Re, // Regular Expression Verification
Invalidtext: 'The email format is incorrect or this email has been registered! ',
Validator: checkemail // custom verification function
}). Applyto (useremail ));

Fm2.add (New Ext. Form. textfield ({
Allowblank: false, // cannot be blank
Blanktext: 'The password cannot be blank! '
}). Applyto (ext. Get ('userpwd ')));

Fm2.add (New Ext. Form. textfield ({
Allowblank: false, // cannot be blank
Blanktext: 'The password cannot be blank! ',
Invalidtext: 'Two passwords are different! ',
Validator: vailda // custom verification function
}). Applyto (ext. Get ('userpwd1 ')));

Fm2.add (New Ext. Form. textfield ({
Allowblank: false, // cannot be blank
Blanktext: 'the Member name cannot be blank! '
}). Applyto ('mermername '));

Extjs can perform flexible verification on the form. The above code binds the form field, adds the corresponding verification, and also supports custom function verification, the following is a comparison between two custom functions with the same password

/**//**
* Verify that the password is the same
*/
Function vailda ()
{
If (ext. Get ('userpwd'). Dom. value = ext. Get ('userpwd1 '). Dom. value)
Return true;
Else
Return false;
}