Ext2.2用户名和密码登录表单的例子

eimhee · 发表于 2013-1-29 07:48:28

这个表单也是我使用中的一个东西。感觉还不错。

先看运行效果

看代码
<div class="highlighter">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><span />
<span /><html xmlns="http://www.w3.org/1999/xhtml"><span />
<span /><head><span />
<span /><link rel="stylesheet" type="text/css" href="resources/css/ext-all.css"/><span />
<span /><script type="text/javascript" src="adapter/prototype/prototype.js"></script><span />
<span /><script type="text/javascript" src="adapter/prototype/scriptaculous.js?load=effects"></script><span />
<span /><script type="text/javascript" src="adapter/prototype/ext-prototype-adapter.js"></script><span />
<span /><script type="text/javascript" src="ext-all.js"></script><span />
<span /><style type="text/css"><span />
#LOGIN_FORM_LAYER {
position:relative;
top:150px;
width: 965px;
height: 551px;
}
#loginDIV {
width:500px;
position:relative;
top:100px;
}
<span /></style><span />
<span /></head><span />
<span /><body><span />
<span /><center><span />
<span /><script type="text/javascript"><span />
Ext.onReady(function(){
<span />
Ext.QuickTips.init();
<span />
// turn on validation errors beside the field globally
Ext.form.Field.prototype.msgTarget = 'side';
<span />
var bd = Ext.getBody();
<span />
/*
* ================ Simple form =======================
*/
//bd.createChild({tag: 'h2', html: 'Form 1 - Very Simple'});
<span />
<span />
var simple = new Ext.FormPanel({
id: 'LOGIN_FORM',
labelWidth: 75, // label settings here cascade unless overridden
url:'login.jsp',
frame:true,
title: '<font size=3>登录系统</font>',
bodyStyle:'padding:5px 5px 0',
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
ctCls: 'font-size:12px',
<span />
items: [{
fieldLabel: '用户名',
name: 'username',
allowBlank:false
},{
fieldLabel: '密码',
name: 'password',
inputType :'password'
},new Ext.form.Hidden({
name:'referer',
value:'/index'
})
],
<span />
buttons: [{
id: 'submitButton',
type: 'submit',
text: '登录',
tooltip: '点击这个按钮登录系统',
handler: login
}]
});
simple.render("loginDIV");
});
function login(){
Ext.Ajax.request({
url: '/login',
form: 'LOGIN_FORM',
success: function(t){
alert(t.responseText);
}
});
}
<span /></script><span />
<span /><div id="LOGIN_FORM_LAYER"><span />
<span /><div id="loginDIV"></div><span />
<span /></div><span />
<span /></center><span />
<span /></body><span />
<span /></html><span />
<span />

		自动登录	找回密码
密码			立即注册

Ext2.2用户名和密码登录表单的例子

浏览过的版块