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: 'http://www.cnblogs.com/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里调用

今天先到这里,下次来实现后台界面框架。

原文地址:https://www.cnblogs.com/xqhppt/p/1801035.html