自己做的EXT 登录页面，有些粗糙
登录界面
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="../ext-2.2/build/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
.login{
background-image: url(../ext-2.2/examples/shared/icons/fam/user_add.gif) !important;
}
</style>
<script type="text/javascript" language="JavaScript">
var win;
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
win=new Ext.Window({
id:'Login-win',
title:'登录界面 ',
iconCls:'login',
width:618,
height:370,
resizable:false,
region:'center',
collapsible:true,
plain:true,
items:new Ext.form.FormPanel({
id:'Login-form',
labelWidth:50,
labelAlign:'right',
buttonAlign:'center',
baseCls:'header',
layout:'form',
items:[{
xtype:'panel',
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
html: '<img src="../image/loging.gif" width ="600" height="200">'
},{
html:'<marquee scrolldelay="5" scrollAmount="2" bgcolor="#CCD9E8"><font color="red">欢迎登录后台管理系统！</font></marquee><br>'
},
{
xtype:'textfield',
id:'userName',
fieldLabel:'用户名',
labelAlign:'center',
height:25,
allowBlank:false,
width:500
},{
xtype:'textfield',
id:'password',
inputType:'password',
height:25,
fieldLabel:'口令',
allowBlank:false,
width:500
}],
buttons:[{
text:'登录',
type:'submit',
handler : function() {
var but = this;
but.setDisabled(true);
this.setText('正在登录');
Ext.getCmp('Login-form').getForm().submit({
url : '/Shopping/LoginServlet',
method : "GET",
success : function(form, action) {
document.location = 'Main.html';
},
failure : function() {
but.setText("登录");
but.setDisabled(false);
}
});
}
},{
text:'关闭',
type:'button',
handler : function(){
win.close();
}
}]
})
});
win.show()
});
</script>
</head>
<body>
</body>
</html>
代码：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-2.2/resources/css/ext-all.css" />
<!-- GC --> <!-- LIBS -->
<script type="text/javascript" src="../ext-2.2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-2.2/ext-all.js"></script>
<script type="text/javascript" src="../ext-2.2/build/locale/ext-lang-zh_CN.js"></script>
<style type="text/css">
.login{
background-image: url(../ext-2.2/examples/shared/icons/fam/user_add.gif) !important;
}
</style>
<script type="text/javascript" language="JavaScript">
var win;
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL='../ext-2.2/resources/images/default/s.gif';
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget='side';
win=new Ext.Window({
id:'Login-win',
title:'登录界面 ',
iconCls:'login',
width:618,
height:370,
resizable:false,
region:'center',
collapsible:true,
plain:true,
items:new Ext.form.FormPanel({
id:'Login-form',
labelWidth:50,
labelAlign:'right',
buttonAlign:'center',
baseCls:'header',
layout:'form',
items:[{
xtype:'panel',
defaults:{autoHeight:true, bodyStyle:'padding:10px'},
html: '<img src="../image/loging.gif" width ="600" height="200">'
},{
html:'<marquee scrolldelay="5" scrollAmount="2" bgcolor="#CCD9E8"><font color="red">欢迎登录后台管理系统！</font></marquee><br>'
},
{
xtype:'textfield',
id:'userName',
fieldLabel:'用户名',
labelAlign:'center',
height:25,
allowBlank:false,
width:500
},{
xtype:'textfield',
id:'password',
inputType:'password',
height:25,
fieldLabel:'口令',
allowBlank:false,
width:500
}],
buttons:[{
text:'登录',
type:'submit',
handler : function() {
var but = this;
but.setDisabled(true);
this.setText('正在登录');
Ext.getCmp('Login-form').getForm().submit({
url : '/Shopping/LoginServlet',
method : "GET",
success : function(form, action) {
document.location = 'Main.html';
},
failure : function() {
but.setText("登录");
but.setDisabled(false);
}
});
}
},{
text:'关闭',
type:'button',
handler : function(){
win.close();
}
}]
})
});
win.show()
});
</script>
</head>
<body>
</body>
</html>