zl程序教程

您现在的位置是:首页 >  其他

当前栏目

ext实现完整的登录代码

代码 实现 登录 完整 Ext
2023-06-13 09:14:01 时间
Ext.form.Field.prototype.msgTarget = "side";

//定义表单
var simple = new Ext.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"
});
//控制进度速度
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);
}

//提交到服务器操作
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();}//重置表单
}]
}); 
//定义窗体
var win = new Ext.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();//显示窗体