ext实现完整的登录代码

时间:2021-05-28

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

//定义表单
varsimple=newExt.FormPanel({
labelWidth:75,
baseCls:'x-plain',
width:150,
defaultType:'textfield',//默认字段类型

//定义表单元素
items:[{
fieldLabel:'帐户',
name:'name',//元素名称
//anchor:'95%',//也可用此定义自适应宽度
allowBlank:false,//不允许为空
blankText:'帐户不能为空'//错误提示内容
},{
inputType:'password',
fieldLabel:'密码',
//anchor:'95%',
name:'pws',
allowBlank:false,
blankText:'密码不能为空'
}
],

buttons:[{
text:'登陆',
type:'submit',
//定义表单提交事件
handler:function(){
if(simple.form.isValid()){//验证合法后使用加载进度条
Ext.MessageBox.show({
title:'请稍等',
msg:'正在加载...',
progressText:'',
width:300,
progress:true,
closable:false,
animEl:'loding'
});
//控制进度速度
varf=function(v){
returnfunction(){
vari=v/11;
Ext.MessageBox.updateProgress(i,'');
};
};

for(vari=1;i<13;i++){
setTimeout(f(i),i*150);
}

//提交到服务器操作
simple.form.doAction('submit',{
url:'check.asp',//文件路径
method:'post',//提交方法post或get
params:'',
//提交成功的回调函数
success:function(form,action){
if(action.result.msg=='ok'){
document.location='index.html';
}else{
Ext.Msg.alert('登陆错误',action.result.msg);
}
},
//提交失败的回调函数
failure:function(){
Ext.Msg.alert('错误','服务器出现错误请稍后再试!');
}
});
}
}
},{
text:'取消',
handler:function(){simple.form.reset();}//重置表单
}]
});
//定义窗体
varwin=newExt.Window({
id:'win',
title:'用户登陆',
layout:'fit',//之前提到的布局方式fit,自适应布局
width:300,
height:150,
plain:true,
bodyStyle:'padding:5px;',
maximizable:false,//禁止最大化
closeAction:'close',
closable:false,//禁止关闭
collapsible:true,//可折叠
plain:true,
buttonAlign:'center',
items:simple//将表单作为窗体元素嵌套布局
});
win.show();//显示窗体

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章