extjs 4.0登陆页面的设计

来源：互联网发布：用友软件售后服务电话编辑：程序博客网时间：2024/04/29 22:03

图标：

今天做了一个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();
            }
         }
      });
}
};