Ext implements complete logon code _ YUI. Ext

Use ext to create the code Ext. form. Field. prototype. msgTarget = 'day ';

// Define the form
Var simple = new Ext. FormPanel ({
LabelWidth: 75,
BaseCls: 'x-plain ',
Width: 150,
DefaultType: 'textfield ', // default Field Type

// Define the form Element
Items :[{
FieldLabel: 'account ',
Name: 'name', // element name
// Anchor: '000000', // You can also define the adaptive width.
AllowBlank: false, // null is not allowed
BlankText: 'account cannot be blank '// error message content
},{
InputType: 'Password ',
FieldLabel: 'Password ',
// Anchor: '123 ',
Name: 'pws ',
AllowBlank: false,
BlankText: 'password cannot be blank'
}
],

Buttons :[{
Text: 'login ',
Type: 'submit ',
// Define the form submission event
Handler: function (){
If (simple. form. isValid () {// use the loading progress bar after verifying the validity
Ext. MessageBox. show ({
Title: 'Please wait ',
Msg: 'loading ...',
ProgressText :'',
Width: 300,
Progress: true,
Closable: false,
AnimEl: 'loding'
});
// Control the progress speed
Var f = function (v ){
Return function (){
Var I = v/11;
Ext. MessageBox. updateProgress (I ,'');
};
};

For (var I = 1; I <13; I ++ ){
SetTimeout (f (I), I * 150 );
}

// Submit the operation to the server
Simple. form. doAction ('submit ',{
Url: 'Check. asp ', // file path
Method: 'post', // submit the post or get method
Params :'',
// Callback function for successful submission
Success: function (form, action ){
If (action. result. msg = 'OK '){
Document.location+'index.html ';
} Else {
Ext. Msg. alert ('logon error', action. result. msg );
}
},
// Callback function for submission failure
Failure: function (){
Ext. Msg. alert ('error', 'server error. Please try again later! ');
}
});
}
}
},{
Text: 'cancel ',
Handler: function () {simple. form. reset ();} // reset the form
}]
});
// Define the form
Var win = new Ext. Window ({
Id: 'win ',
Title: 'user login ',
Layout: 'fit ', // previously mentioned layout method fit, Adaptive layout
Width: 300,
Height: 150,
Plain: true,
BodyStyle: 'padding: 5px ;',
Maximizable: false, // maximum prohibition
CloseAction: 'close ',
Closable: false, // disable
Collapsible: true, // foldable
Plain: true,
ButtonAlign: 'center ',
Items: simple // use a form as a nested layout of form elements
});
Win. show (); // display the form