[セットトップ]ExtJs 4.2ログインインタフェース(検証コードをクリックして自動的にリフレッシュし、labelはclickイベントを実現する)
7353 ワード
ExtJs4.2ログインインタフェース(検証コードをクリックして自動的にリフレッシュし、labelはclickイベントを実現する)
転載は以下のことを明記してください.http://blog.csdn.net/qiuzhping/article/details/42596339
効果図:
![[置顶] ExtJs4.2 登陆界面（点击验证码自动刷新，label实现click事件）_第1张图片](https://s1.md5.ltd/image/79da26e52a560d824467d8bc2dc4d8bd.jpg)
![[置顶] ExtJs4.2 登陆界面（点击验证码自动刷新，label实现click事件）_第2张图片](https://s1.md5.ltd/image/ef846750d52d8edbfc4e5fc7e1d19781.jpg)
転載は以下のことを明記してください.http://blog.csdn.net/qiuzhping/article/details/42596339
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<head>
<title>Welcome</title>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/main.css" />
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/icon.css" />
<script type="text/javascript" src="<%=request.getContextPath()%>/Ext/include-ext.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/common/Cookie.js"></script>
</head>
<script type="text/javascript">
function randomColor(){
var colorStr=Math.floor(Math.random()*0xFFFFFF).toString(16).toUpperCase();
return"#"+"000000".substring(0,6-colorStr)+colorStr;
}
function createCode() {
code = "";
var codeLength = 4;
var random = new Array(0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C',
'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O',
'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z');//
for (var i = 0; i < codeLength; i++) {
var index = Math.floor(Math.random() * 36);
code += random[index];
}
cp.set("hiddenValidationCode",code);
return code;
}
Ext.ux.ValidationCode = Ext.extend(Ext.Panel, {
initComponent : function() {
Ext.apply(this, {
items : [ {
xtype : 'label',
id : 'validationCode',
text:createCode(),
style:'font-size: 20px; color: #CC0000;background-color:#6699FF',
listeners : {
render : function() {
Ext.fly(this.el).on('click', function(e, t) {
Ext.getCmp("validationCode").setText(createCode());
});
},
scope : this
}
} ]
});
Ext.ux.ValidationCode.superclass.initComponent.call(this);
}
});
Ext.onReady(function() {
Ext.QuickTips.init();
var loginForm = new Ext.form.Panel({
listeners : {
specialkey : function(field, e) {
if (e.getKey() == Ext.EventObject.ENTER) {
login();
}
}
},
fieldDefaults : {
msgTarget : 'side',
labelWidth : 100
},
defaultType : 'textfield',
defaults : {
margin : '10 10 10 45'
},
items : [ {
fieldLabel : 'Login Name:',
name : 'user.username',
id:'username',
emptyText : 'Please enter your login name',
allowBlank : false,
blankText : 'Login name cannot be empty'
}, {
name : 'user.password',
fieldLabel : 'Password:',
id:'userpassword',
inputType : 'password',
emptyText : 'Please enter your password',
allowBlank : false,
blankText : 'Password can not be empty'
}, {
xtype : 'container',
layout : 'hbox',
fieldDefaults : {
labelAlign : 'side'
},
items : [ {
xtype:'textfield',
editable : false,
fieldLabel: 'validationCode',
value:'validationCode',
id:'operatorId',
name: 'operatorId',
hideable:false,
hidden:true
},{
name : 'checkValidationCode',
id : 'checkValidationCode',
width : 180,
xtype : 'textfield',
fieldLabel : 'Validation Code:',
listeners : {
change : function(field,newValue,oldValue){
if(newValue.length > 4){
Ext.Msg.alert('Information','Validation code length must be equals 4.');
Ext.getCmp("checkValidationCode").setValue("");
}
}
}
}, new Ext.ux.ValidationCode({
renderTo : document.body
})]
} ],
buttonAlign : 'center',
buttons : [ {
text : 'Submit',
handler : login
}, {
text : 'Reset',
handler : reset
} ],
listeners : {
render : function(input) {
new Ext.KeyMap(input.getEl(), [ {
key : Ext.EventObject.ENTER,
fn : function() {
login();
}
} ]);
}
}
})
var win = Ext.create('Ext.window.Window', {
title : 'Login Form',
collapsible : false,
animCollapse : false,
maximizable : false,
closable : false,
draggable : false,
width : 350,
items : loginForm
});
win.show();
function checkUserInfo(){
Ext.getCmp("userpassword").setValue(Ext.util.Format.trim(Ext.getCmp("userpassword").getValue()));
Ext.getCmp("username").setValue(Ext.util.Format.trim(Ext.getCmp("username").getValue()));
if(Ext.getCmp("userpassword").getValue() == '' || Ext.getCmp("username").getValue() == ''){
Ext.Msg.alert("Information",'Invalid input. Please check form entries.');
return false;
}
return true;
}
function login() {
if(!checkUserInfo()){
return;
}
var code1 = cp.get("hiddenValidationCode");
var code2 = Ext.getCmp("checkValidationCode").getValue();
if(code1.toLowerCase() != code2.toLowerCase()){
Ext.Msg.alert('Information','Please enter validation code');
return;
}
if (loginForm.isValid()) {
loginForm.getForm().submit({
clientValidation : true,
url : '/report/Login!login.action',
method : 'post',
success : function(form, action) {
Ext.Msg.alert("Information","Login success");
cp.set("username",Ext.getCmp("username").getValue());
document.location = "index.jsp";
},
failure : function(form, action) {
Ext.Msg.alert("Information",'Invalid login name or password!');
}
})
}
}
function reset() {
loginForm.form.reset();
}
});
</script>
</html>
効果図:
![[置顶] ExtJs4.2 登陆界面（点击验证码自动刷新，label实现click事件）_第1张图片](https://img.md5.com/image/info5/b5f21d52905147f89cce2faa10fa99ba.jpg)
![[置顶] ExtJs4.2 登陆界面（点击验证码自动刷新，label实现click事件）_第2张图片](https://img.md5.com/image/info5/dc4726b25a55493d8fa8c97740ce3a7f.jpg)