ExtJs的formPanel问题

ExtJs中的form我不怎么会用。我想大家能不能帮我写个简单的例子。例子很简单:就是一个formpanel进行登录用的用户名密码验证码(输入框后面是验证码的图片你随便插... ExtJs中的form我不怎么会用。我想大家能不能帮我写个简单的例子。
例子很简单:
就是一个formpanel 进行登录用的
用户名
密码
验证码 (输入框后面是验证码的图片你随便插张图片就行)
提交和取消按钮
现要求:
用户名密码和验证码不能为空，首先给出提示。提交时若为空 alert 禁止提交。
提交的url为test.jsp 在test.jsp中显示输入的用户名和密码即可。

因为我是零基础，希望能给出详细的代码。包括Html和js代码。
简单验证登陆是否成功如果用户名是“zhangsan”则提示登录成功转向response.jsp并在response.jsp中显示用户名和密码
其他情况提示用户名错误！展开

 我来答

1个回答

#热议# 上班途中天气原因受伤算工伤吗？

w1985g
2010-04-22 · TA获得超过1633个赞

知道小有建树答主

回答量：1190

采纳率：100%

帮助的人：1040万

我也去答题访问个人页

关注

展开全部

<html>
<head>
<title>login</title>

<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript" src="login.js"></script>

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
</head><body>
<div id="login"></div>
</body>
</html>

/********** login.js **********/
LoginWindow=Ext.extend(Ext.Window,{
title : '登录界面',
width : 265,
height : 170,
buttonAlign : 'center',
createFormPanel:function(){

return new Ext.form.FormPanel({
bodyStyle : 'padding-top:6px',
defaultType : 'textfield',
labelAlign : 'right',
labelWidth : 55,
labelPad : 0,
frame : true,
defaults : {
allowBlank : false,
width : 158
},
items : [{
cls : 'user',
name : 'loginName',
fieldLabel : '帐号',
blankText : '帐号不能为空'
}, {
cls : 'key',
name : 'loginPwd',
fieldLabel : '密码',
blankText : '密码不能为空',
inputType : 'password'
}, {
cls : 'key',
name:'randCode',
id:'randCode',
fieldLabel:'验证码',
width:60,
blankText : '验证码不能为空',
listeners :{ }
}],
keys : [{
key : Ext.EventObject.ENTER,
fn : this.login,
scope : this
}]
});
},
login:function() {
this.fp.form.submit({
waitMsg : '正在登录......',
url : '提交地址',
success : function(form, action) {
window.location.href = '登陆成功地址';
},
failure : function(form, action) {
form.reset();
try{
Ext.MessageBox.alert('警告', action.result.info);
}catch(e){
Ext.MessageBox.alert('警告','用户名或密码不正确');
}
}
});
},
initComponent : function(){
LoginWindow.superclass.initComponent.call(this);
this.fp=this.createFormPanel();
this.add(this.fp);
this.addButton('登陆',this.login,this);
this.addButton('重置', function(){
this.fp.form.reset();
},this);
}
});

Ext.onReady(function(){
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var win=new LoginWindow();
win.show();
var bd = Ext.getDom('randCode');
var bd2 = Ext.get(bd.parentNode);
bd2.createChild([{
tag: 'img',
id: 'imagecode',
src: '图片地址',
align: 'absbottom'
}]);
});

本回答由提问者推荐

已赞过 已踩过<

评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

ExtJs的formPanel问题

其他类似问题

为你推荐：