ExtJs 表单提交登陆实现代码
作者：
上一篇简单做了一个用ext写的登陆界面，今天来实现登陆效果，主要是回顾下ext中表单提交方法的使用。
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: 'https://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<XUser> json = new JsonConvert<XUser>();
jsonData = json.ToRequest(success, rspText, userEnity);
}
Response.Write(jsonData);
Response.End();
}
注意：返回的数据必须是Json格式的 success,rspText为返回的标记 在js里通过action.result.success里调用
今天先到这里，下次来实现后台界面框架。
复制代码 代码如下:
//登陆按钮单击事件
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: 'https://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<XUser> json = new JsonConvert<XUser>();
jsonData = json.ToRequest(success, rspText, userEnity);
}
Response.Write(jsonData);
Response.End();
}
注意：返回的数据必须是Json格式的 success,rspText为返回的标记 在js里通过action.result.success里调用
今天先到这里，下次来实现后台界面框架。