extjs 4.0登陸頁面的設計

原創

Raise扬

2020-02-22 06:35

圖標：

今天做了一個ext的登陸頁面，挺簡潔的，下面是代碼jsp代碼：
<link rel="stylesheet" type="text/css" href="/copyright2/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/copyright2/extjs4/resources/css/example.css" />

<link rel="stylesheet" type="text/css" href="/copyright2/backstage/css/table.css" />
<link rel="stylesheet" type="text/css"href="/copyright2/backstage/css/backstage.css" />
<script type="text/javascript" src="/copyright2/extjs4/bootstrap.js"></script>
<script type="text/javascript" src="/copyright2/extjs4/examples.js"></script>
<liNK
href="/copyright2/images/User_Login.css" type=text/css rel=stylesheet>
  <script type="text/javascript" src="/copyright2/login.js"></script>
  </head>

  <body>
<div id="tr" style="margin-top: 200px;margin-left: 500px" ></div>

  </body>
</html>
login.js代碼：

Ext.onReady(function() {
      Ext.QuickTips.init();
   Ext.form.Field.prototype.msgTarget = 'side';
      var dr = Ext.create('Ext.FormPanel', {
      renderTo: 'tr',
      frame: true,
      title: '用戶登錄',
      buttonAlign : 'center',
      iconCls:'table_login',
      bodyStyle : 'background: White;padding:30 0 0 20;',
   height:250,
      width: 450,
      defaultType: 'textfield',
      items: [
            { columnWidth:.28, //列所佔的比例(最大值爲1,各列的和加起來等於最大值1)
                  html:'<img src="/copyright2/backstage/images/login-user.jpg" />', //左邊列放一個logo
                        margin:"0 0 0 300"

                     },
            {
                              margin:"-80 0 0 0",
                     id :'uname',
                  fieldLabel : '用戶名',
                  name : 'name',//元素名稱
                  //anchor:'95%',//也可用此定義自適應寬度
                  allowBlank : false,//不允許爲空
                  iconCls:'table_login',
                  blankText : '用戶名不能爲空'//錯誤提示內容
            },
            {
                     margin:"20 0 0 0",
                     id : 'pwd',
                  //xtype: 'textfield',
                  inputType : 'password',
                  fieldLabel : '密　碼',
                  //anchor:'95%',
                  maxLength : 10,
                  name : 'password',
                  allowBlank : false,

                  blankText : '密碼不能爲空'
            },

      ],
      buttons : [ {

         text : '登錄',
         type : 'submit',
         id : 'sb',
         //定義表單提交事件

      }, {
         text : '重置',
         handler : function() {
            dr.form.reset();
         }
      } ] ,
      keys : [ {
         key : Ext.EventObject.ENTER,
         fn : save,
         scope : this
      } ]
});
});
function save() {
var userName = uname.getValue();
var userPass = pwd.getValue();
//驗證合法後使用加載進度條
if (dr.form.isValid()) {
      //提交到服務器操作
      dr.form.submit({
         waitMsg : '正在進行登陸驗證,請稍後...',
         url : 'login!checkUser.action',
         method : 'post',
         params : {
         userName : userName,
         userPass : userPass
         },
         //提交成功的回調函數
         success : function(form, action) {
            if (action.result.msg == 'OK') {
                  window.location.href="login!index.action?userName="+userName;
            }else if(action.result.msg == 'ERROR') {
                  window.location.href="index.jsp";
            }
         },
         //提交失敗的回調函數
         failure : function(form, action) {
            switch (action.failureType) {
            case Ext.form.Action.CLIENT_INVALID:
                  Ext.Msg.alert('錯誤提示', '表單數據非法請覈實後重新輸入！');
                  break;
            case Ext.form.Action.CONNECT_FAILURE:
                  Ext.Msg.alert('錯誤提示', '網絡連接異常！');
                  break;
            case Ext.form.Action.SERVER_INVALID:
               Ext.Msg.alert('錯誤提示', "您的輸入用戶信息有誤，請覈實後重新輸入！");
               simple.form.reset();
            }
         }
      });
}
};