ext implements complete login code_YUI.Ext related

Ext.form.Field.prototype.msgTarget = 'side';

//Define form
var simple = new Ext.FormPanel({
labelWidth: 75,
baseCls: 'x -plain',
width: 150,
defaultType: 'textfield', //Default field type

//Define form elements
items: [{
fieldLabel: 'Account ',
name: 'name',//Element name
//anchor:'95%',//You can also use this to define adaptive width
allowBlank:false,//Blank is not allowed
blankText:'Account cannot be empty'//Error message content
},{
inputType:'password',
fieldLabel: 'Password',
//anchor:'95%' ,
name: 'pws',
allowBlank:false,
blankText:'Password cannot be blank'
}
],

buttons: [{
text: 'Login',
type: 'submit',
//Define form submission event
handler:function(){
if(simple.form.isValid()){//Verification Use the loading progress bar after it is legal
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 setTimeout(f(i), i*150);
}

//Submit to server operation
simple .form.doAction('submit',{
url:'check.asp',//File path
method:'post',//Submit method post or get
params:'',
//Callback function for successful submission
success:function(form,action){
if (action.result.msg=='ok') {
document.location='index.html' ;
} else {
Ext.Msg.alert('Login error', action.result.msg);
}
},
//Callback function for submission failure
failure:function(){
Ext.Msg.alert('Error', 'An error occurred on the server, please try again later! ');
}
});
}
}
},{
text: 'Cancel',
handler:function(){simple.form.reset ();}//Reset form
}]
});
//Define form
var win = new Ext.Window({
id:'win',
title:'User login',
layout:'fit', //The previously mentioned layout method fit, adaptive layout
width:300,
height:150,
plain: true,
bodyStyle:'padding:5px;',
maximizable:false,//Prohibit maximization
closeAction:'close',
closable:false,//Prohibit closing
collapsible :true,//Collapsible
plain: true,
buttonAlign:'center',
items:simple//Nested layout of the form as a form element
});
win .show();//Display form