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里调用

 

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