Home  >  Article  >  Web Front-end  >  ExtJs 表单提交登陆实现代码_extjs

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

WBOY
WBOYOriginal
2016-05-16 18:21:081190browse
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里调用
今天先到这里,下次来实现后台界面框架。
Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn