ExtJs 表单提交登陆实现代码_extjs-js教程-PHP中文网

ExtJs 表单提交登陆实现代码_extjs

php中文网

发布： 2016-05-16 18:21:08

原创

1397人浏览过

1 在子类中添加单击提交事件

 
//登陆按钮单击事件 
loginFun: function() { 
var f = Ext.getCmp("loginForm"); 
//表单验证 
if (f.form.isValid) { 
f.form.submit({ 
waitTitle: "请稍候", 
waitMsg: '正在登陆...', 
url: 'http://www.cnblogs.com/Service/SystemService/SystemService.ashx?Method=UserLogin', 
method: 'POST', 
success: function(form, action) { 
window.location = 'Main.htm' 
}, 
failure: function(form, action) { 
if (action.result == undefined) { 
Ext.Msg.alert('提示', "系统出错...请联系管理员"); 
form.items.items[1].reset(); 
} 
else { 
Ext.Msg.alert('提示', action.result.rspText); 
form.items.items[1].reset(); 
} 
} 
}); 
} 
}, 

2 在初始化中给登陆按钮绑定事件

复制代码代码如下:

 
//初始化 
init: function() { 
this.LoginWin.show(); 
Ext.getCmp("loginBtn").on('click', this.loginFun); 
this.loadMask = new Ext.LoadMask(this.LoginWin.body, { msg: "页面加载中……" }); 
} 

3.关于ext.extend
　　定义：function extend(function sb,function sp,Object overrides)
　　简单解释：第一个参数--子类
　　　　　　　第二个参数--父类
　　　　　　　第三个参数--重写对象
　　例子中子类为 XQH.ExtJs.Frame.app
　　　　　　　父类 Ext.util.Observable（一个抽象基类（Abstract base class），为事件机制的管理提供一个公共接口。）
　　更详细介绍请看（转）http://wangyu.javaeye.com/blog/210849
4.url: 'http://www.jb51.net/Service/SystemService/SystemService.ashx?Method=UserLogin'

复制代码代码如下:

 
public void UserLogin() 
{ 
StringBuilder jsonData = new StringBuilder(); 
bool success = false; 
string rspText = string.Empty; 
if (Request["LoginName"] != null && Request["LoginPsd"] != null) 
{ 
string loginName = Request["LoginName"].Trim(); 
string loginPsd = Request["LoginPsd"].Trim(); 
XUser userEnity = userAccess.GetUserByName(loginName); 
if (userEnity != null) 
{ 
if (userEnity.LoginPsd == loginPsd) 
{ 
success = true; 
Session["UserEnity"] = userEnity; 
} 
else 
{ 
success = false; 
rspText = "账号或密码错误"; 
} 
} 
else 
{ 
success = false; 
rspText = "账号不存在,请联系管理员"; 
} 
JsonConvert json = new JsonConvert(); 
jsonData = json.ToRequest(success, rspText, userEnity); 
} 
Response.Write(jsonData); 
Response.End(); 
} 

注意：返回的数据必须是Json格式的 success,rspText为返回的标记在js里通过action.result.success里调用
今天先到这里，下次来实现后台界面框架。