ExtJS4.2学习(22)登录界面
现在开始我们来慢慢完善这个系统，今天做一个登录界面，此套系统已经开始慢慢加入Java各种框架，或者后期我会自己定义合适的框架，让它可以完整的跑下来。
今天做的是用window包裹panel，panel再包裹tabpanel实现的：先来看看今天做的效果图：
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>登录-ExtJS4.2学习之路</title>
<link href="../ExtJS4.2/resources/css/ext-all-neptune-rtl.css" rel="stylesheet">
<link href="../ExtJS4.2/css/icon.css" rel="stylesheet">
<script src="../ExtJS4.2/ext-all.js"></script>
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript" src="../demo/js/login.js"></script>
<style type="text/css">
.user{background: url(../ExtJS4.2/icons/user.png) no-repeat 2px 2px;}
.key{background: url(../ExtJS4.2/icons/key.png) no-repeat 2px 2px;}
.Userkey{background: url(../ExtJS4.2/icons/Userkey.png) no-repeat 2px 2px;}
.key,.user,.Userkey{
background-color: #FFFFFF;
padding-left: 20px;
font-size: 12px;
}
.bgimage {
background:url(../demo/image/logo.jpg ) no-repeat top;
position:absolute;
}
</style>
</head>
<body>
<div id="hello-tabs">
<!-- <img border="0" width="430" height="60" src="../demo/image/logo.jpg" /> -->
</div>
<div id="aboutDiv" class="x-hidden"
style='color: black; padding-left: 10px; padding-top: 10px; font-size: 12px'>
思考者日记网ExtJs学习系统 v1.0<br/><br/>
2013-2014 思考者日记网|束洋洋个人博客（沪ICP备13005070）<br/><br/>
官方网站:<a href="http://www.shuyangyang.com.cn" target="_blank">www.shuyangyang.com.cn</a>
</div>
</body>
</html>
其中自定义了一些CSS和自己加的DIV，为了实现上面的图片和tabpanel里的东西，再看看关键的login.js
Ext.onReady(function() {
var userLoginPanel = Ext.create('Ext.panel.Panel', {
bodyCls: 'bgimage',
border : false,
defaults:{
margin:'58 0'
},
items:{
xtype : 'tabpanel',
id : 'loginTabs',
activeTab : 0,
height : 180,
border : false,
items:[{
title : "身份认证",
xtype : 'form',
id : 'loginForm',
defaults : {
width : 260,
margin: '10 0 0 70'
},
// The fields
defaultType : 'textfield',
labelWidth : 40,
items: [{
fieldLabel: '用户名',
cls : 'user',
name: 'username',
labelAlign:'right',
labelWidth:65,
maxLength : 30,
emptyText:'请在这里填写用户名',
maxLengthText : '账号的最大长度为30个字符',
blankText:"用户名不能为空，请填写！",//错误提示信息，默认为This field is required!
allowBlank: false
},{
fieldLabel: '密 码',
cls : 'key',
name: 'password',
inputType:"password",
labelWidth:65,
labelAlign:'right',
emptyText:'请在这里填写密码',
maxLengthText :'密码长度不能超过20',
maxLength : 20,
blankText:"密码不能为空，请填写！",//错误提示信息，默认为This field is required!
allowBlank: false
},{
xtype:"combo",
fieldLabel: '角 色',
cls : 'Userkey',
name: 'role',
labelAlign:'right',
labelWidth:65,
store:["管理员","校领导","教职工"],//数据源为一数组
emptyText:'请选择角色.',
blankText:"请选择角色！",//错误提示信息，默认为This field is required!
allowBlank: false
}, {
id : 'id_reg_panel',
xtype : 'panel',
border : false,
hidden : true,
html : '<br><span id='messageTip' style='color:red'> </span>'
}]
}, {
title : '关于',
contentEl : 'aboutDiv',
defaults : {
width : 230
}
}]
}
});
Ext.create('Ext.window.Window', {
title : 'SHUYANGYANGExtJs学习系统',
width : 440,
height : 300,
layout: 'fit',
plain : true,
modal : true,
maximizable : false,
draggable : false,
closable : false,
resizable : false,
items: userLoginPanel,
// 重置 和 登录 按钮.
buttons: [{
text: '重置',
iconCls : 'Wrench',
handler: function() {
Ext.Msg.alert('提示', '重置！');
}
}, {
text: '登录',
iconCls : 'User',
handler: function() {
Ext.Msg.wait("请等待", "温馨提示", {
text:'正在登录……'
});
}
}]
}).show();
});
这里大家可以自由发挥，加一些触发事件来实现与后台交互，这里我就不多写了，后续完善的时候我会写出来，因为现在静态要实现的太多了，慢慢来。看到不懂的属性或者地方，大家就去查API吧，相信学了这么久，这个你应该会的吧？
连载中，请大家继续关注！本文出自我的个人网站思考者日记网
论坛汇总贴：http://bbs.51cto.com/thread-1106544-1.html