Extjs设计后台管理员登陆页面

最新推荐文章于 2016-01-19 19:09:21 发布

Creating

最新推荐文章于 2016-01-19 19:09:21 发布

阅读量7.4k

点赞数 1

文章标签： extjs stylesheet servlet login date html

本文链接：https://blog.csdn.net/Solidwang/article/details/6135161

版权

一、创建login.js文件：

//登陆账号
var loginName = new Ext.form.TextField({
  fieldLabel:'账号',
  name:'loginName',
  anchor:'90%'
});

//登陆密码
var loginPwd = new Ext.form.TextField({
  fieldLabel:'密码',
  inputType:'password',
  name:'loginPwd',
  anchor:'90%'
});

//登陆随机码
var rand = new Ext.form.TextField({
  fieldLabel:'随机码',
  name:'rand',
  anchor:'90%'
});

//登陆按钮
var btnLogin = new Ext.Button({
  name:'login',
  text:'登陆'
  //handler:loginOnClick
});

//清空按钮
var btnClean = new Ext.Button({
  name:'clean',
  text:'清空'
  //handler:cleanOnClick
});

//登陆表单
var loginForm = new Ext.form.FormPanel({
  frame:true,
  labelAlign:'right',
  labelWidth:70,
  url:'admin_login.action',
  align:'center',
  defaultType:'textfield',
  items:[loginName, loginPwd, rand, validationCodeImageFieldSet]
});

//登陆窗体
var login = new Ext.Window({
title:'管理员登陆',
layout:'fit',
modal:true,
width:'300',
height:200,
closable:false,
resizable:false,
buttons:[btnLogin, btnClean],
items:[loginForm]
})

二、创建产生随机码的common.js文件（还需要新建产生随机图片的servlet文件ValidationCodeServlet）

//随机验证码（此处的图片调用的Servlet）
var validationCodeImageFieldSet = new Ext.form.FieldSet({
  xtype:'column',
  border:false,
  style:'margin-top:10px',
  items:[{
    xtype:'label',
    html : '<a href="#" οnclick="refreshValidationCodeImage()"><img src="../ValidationCodeServlet" id="vcImg" οnclick="src=/'../DreamCreatingCMS/ValidationCodeServlet?/' + new Date().getMilliseconds();" id="xyz"/></a>'
   }, {
    xtype:'label',
    style : 'margin-left:10px',
    html : '<a href="#" οnclick="refreshValidationCodeImage()">换一张</a>'
   }]
});

//改变随机验证码方法
function refreshValidationCodeImage() {
var vcImg = document.getElementById("vcImg");
vcImg.src = '../ValidationCodeServlet?temp=' + new Date().getMilliseconds();
return false;
}

三、在jsp文件中引入创建的js文件：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css">
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="script/common.js"></script>
<script type="text/javascript" src="script/login.js"></script>
<title>管理员登陆</title>
</head>
<body>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = "../extjs/resources/images/default/s.gif";
try {
login.show();
} catch (e) {
alert(e);
}
</script>
</body>
</html>

四、运行效果图：