您的位置:首页 > Web前端 > JavaScript

ExtJS带验证码登录框[新增回车提交]

2011-11-24 17:00 218 查看
原文地址:http://ht19820316.blog.163.com/blog/static/3395523320113222421670/



/*
* 用户带验证码登录页面
* sheak
* code.php 生成验证码
* 1202增加键盘回车提交功能(粗体部分)
*/
/*
* 用户带验证码登录页面
* sheak 081115
* code.php 生成验证码
*/
Ext.QuickTips.init();
LoginWindow = Ext.extend(
Ext.Window,
{
title : '登陆系统',
width : 275,
height : 155,
collapsible : true,
defaults : {
border : false
},
buttonAlign : 'center',
createFormPanel : function() {
// 表单重置函数
function reset() {
myform.form.reset();
}
;

// 表单提交函数,这个是重点,单独提取出来,与myform一个层级
function subjectForm() {
if (myform.getForm().isValid()) {
myform.form.submit({
waitMsg : '正在登录......',
url : '../../../index/login',
timeout : 3000,
success : function(form, action) {
if (action.result.type == 0)// OP
window.location.href = '../op/index.html';
else
window.location.href = 'index.html';
},
failure : function(form, action) {
form.reset();
if (action.failureType == Ext.form.Action.SERVER_INVALID)
Ext.MessageBox
.alert(
'警告',
action.result.errors.msg);
}
});
}
}
;

var myform = new Ext.form.FormPanel({
bodyStyle : 'padding-top:6px',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 55,
labelPad : 2,
// frame : true,
method : 'POST',
// 增加表单键盘事件,键盘按键10或者13会触发subjectForm方法
keys : [ {
key : [ 10, 13 ],
fn : subjectForm
} ],
defaults : {
allowBlank : false,
width : 158
},
items : [ {
cls : 'user',
name : 'username',
fieldLabel : '帐 号',
blankText : '帐号不能为空'
}, {
cls : 'key',
name : 'password',
fieldLabel : '密 码',
blankText : '密码不能为空',
inputType : 'password'
}, {
cls : 'key',
name : 'randCode',
id : 'randCode',
fieldLabel : '验证码',
width : 70,
blankText : '验证码不能为空'
} ],
buttons : [ {
text : '确定',
id : 'sure',
handler : subjectForm//鼠标按键提交表单
}, {
text : '重置',
id : 'clear',
handler : reset
} ]
});
return myform;
},

initComponent : function() {

LoginWindow.superclass.initComponent.call(this);
this.fp = this.createFormPanel();
this.add(this.fp);

}
});

Ext.onReady(function() {
var win = new LoginWindow();

win.show();
var bd = Ext.getDom('randCode');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild({
tag : 'img',
src : 'code.php',
align : 'absbottom'
});

});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: