ExtJs 表單提交登陸實現(xiàn)代碼
更新時間:2010年08月19日 20:33:44 作者:
上一篇簡單做了一個用ext寫的登陸界面,今天來實現(xiàn)登陸效果,主要是回顧下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('提示', "系統(tǒng)出錯...請聯(lián)系管理員");
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)
簡單解釋:第一個參數(shù)--子類
第二個參數(shù)--父類
第三個參數(shù)--重寫對象
例子中 子類為 XQH.ExtJs.Frame.app
父類 Ext.util.Observable(一個抽象基類(Abstract base class),為事件機制的管理提供一個公共接口。)
更詳細介紹請看(轉(zhuǎn))http://wangyu.javaeye.com/blog/210849
4.url: 'http://www.dbjr.com.cn/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 = "賬號不存在,請聯(lián)系管理員";
}
JsonConvert<XUser> json = new JsonConvert<XUser>();
jsonData = json.ToRequest(success, rspText, userEnity);
}
Response.Write(jsonData);
Response.End();
}
注意:返回的數(shù)據(jù)必須是Json格式的 success,rspText為返回的標記 在js里通過action.result.success里調(diào)用
今天先到這里,下次來實現(xiàn)后臺界面框架。
復制代碼 代碼如下:
//登陸按鈕單擊事件
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('提示', "系統(tǒng)出錯...請聯(lián)系管理員");
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)
簡單解釋:第一個參數(shù)--子類
第二個參數(shù)--父類
第三個參數(shù)--重寫對象
例子中 子類為 XQH.ExtJs.Frame.app
父類 Ext.util.Observable(一個抽象基類(Abstract base class),為事件機制的管理提供一個公共接口。)
更詳細介紹請看(轉(zhuǎn))http://wangyu.javaeye.com/blog/210849
4.url: 'http://www.dbjr.com.cn/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 = "賬號不存在,請聯(lián)系管理員";
}
JsonConvert<XUser> json = new JsonConvert<XUser>();
jsonData = json.ToRequest(success, rspText, userEnity);
}
Response.Write(jsonData);
Response.End();
}
注意:返回的數(shù)據(jù)必須是Json格式的 success,rspText為返回的標記 在js里通過action.result.success里調(diào)用
今天先到這里,下次來實現(xiàn)后臺界面框架。
您可能感興趣的文章:
相關文章
extjs 3.31 TreeGrid實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面
extjs 3.31 TreeGrid 我的小改動,實現(xiàn)靜態(tài)頁面加載json到TreeGrid里面2013-04-04Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享
鍵盤上的F5或者退格鍵等按鍵一般來說會觸發(fā)頁面的后退或者刷新事件,然而這些在前端用代碼是可以給屏蔽掉的,這里我們就來看一下Ext JS框架程序中阻止鍵盤觸發(fā)回退或者刷新頁面的代碼分享2016-06-06ExtJS4 動態(tài)生成的grid導出為excel示例
解決了一個表格不能重復下載的小BUG,一個使用grid初始化發(fā)生的BUG,需要的朋友可以參考下2014-05-05Extjs中的GridPanel隱藏列會顯示在menuDisabled中解決方法
在Extjs中的GridPanel會有這樣的情況,隱藏列會顯示在menuDisabled中,但是這個一般沒有什么用處,只是用于后臺取值的作用,感興趣的朋友可以了解下啊,希望本文對你有所幫助2013-01-01Ext JS 4實現(xiàn)帶week(星期)的日期選擇控件(實戰(zhàn)二)
Javascript 有提供Date 對象用于處理時間。但是Date 并沒有提供獲取星期的方法,jquery 的擴展組件 等有直接提供這樣的一些現(xiàn)成包,感興趣的朋友可以了解下2013-08-08extjs DataReader、JsonReader、XmlReader的構(gòu)造方法
DataReader、JsonReader、XmlReader的構(gòu)造方法,需要的朋友可以參考下。2009-11-11