现在我们就来看看我们的页面设计部分。首先是登陆页面logon.jsp：
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<title>HR Manager Project</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/common.css" />
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.get("logon").on("click", function(){
if(Ext.getDom("userName").value==""){
Ext.MessageBox.alert('提示', '请输入用户名！',function(){
Ext.get("userName").focus();
});
return;
}
if(Ext.getDom("passWord").value==""){
Ext.MessageBox.alert('提示', '请输入密码！',function(){
Ext.get("passWord").focus();
});
return;
}
var msg = Ext.get('msg');
msg.load({
url: 'logon.hr',
params: 'userName='+Ext.getDom("userName").value+'&passWord='+Ext.getDom("passWord").value,
text: '正在登陆...',
callback: function(oElement) {
if(oElement.dom.innerHTML=="success"){
oElement.dom.innerHTML="<font color='green'>验证成功，,请稍候...</font>";
window.setTimeout("window.location='index.jsp'", 200);
}
}
});
msg.show();
});
Ext.get("close").on("click",function(){
Ext.MessageBox.confirm('提示', '你确定要退出系统么?', function(button){
if(button=='yes'){
window.close();
}
});
});
});
</script>
</head>
<body class="logon-body">
<table class="logon-body-table">
<tr class="logon-body-table-tr">
<td class="logon-body-table-tr-td">
<div class="logon-body-table-tr-td-div">
<div class="logon-body-table-tr-td-div-div">
用户名 :
<input type="text" id="userName" size="20" />
</div>
<div class="logon-body-table-tr-td-div-div">
密 码 :
<input type="password" id="passWord" size="22" />
</div>
<div align="right" class="logon-body-table-tr-td-div-div">
<button id="logon">
登 陆
</button>
<button id="close">
关 闭
</button>
</div>
<div id="msg" align="right"
class="logon-body-table-tr-td-div-message">
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
下面是主页面index.jsp,主要用ExtJs构建，登陆成功后就可以进入，主要分为3个模块，员工管理，机构管理和用户管理。在员工管理里面，我们实现了对员工的CRUD并且分页显示员工信息：
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<title>HR Manager</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/common.css" />
<script type="text/javascript" src="resources/js/ext-base.js"></script>
<script type="text/javascript" src="resources/js/ext-all.js"></script>
<style type="text/css">
.x-panel-body p {
margin: 5px;
}
.x-column-layout-ct .x-panel {
margin-bottom: 5px;
}
.x-column-layout-ct .x-panel-dd-spacer {
margin-bottom: 5px;
}
.user {
background-image: url(resources/icons/user.gif) !important;
}
.unit {
background-image: url(resources/icons/application_view_list.png)
!important;
}
.settings {
background-image: url(resources/icons/cog.png) !important;
}
.tabs {
background-image: url(resources/icons/tabs.gif ) !important;
}
.munuList {
list-style: square;
padding-left: 30px;
margin-top: 10px;
color: #000000;
font-size: 12px;
text-decoration: underline;
cursor: hand;
}
#main-panel td {
padding: 5px;
}
</style>
</head>
<body>
<script type="text/javascript">
//create main tabpanel
var contentPanel=new Ext.TabPanel({
id:"tabPanel",
region:'center',
deferredRender:false,
activeTab:0,
iconCls: 'tabs',
items:[{
contentEl:'center',
title: '主页',
autoScroll:true
}]
});
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//init main page framework
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region: 'north',
html: '<img src="resources/images/head.jpg" >',
split:true,
height: 90,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'HR Manager Project',
margin:'0 0 0 0'
//border: false,
//layout:"absolute"
},{
region:'west',
id:'west-panel',
title:'菜单栏',
split:true,
200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
cmargins:'0 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
title:'人员管理',
html: Ext.getDom('userMenus').innerHTML,
autoScroll:true,
border:false,
iconCls:'user'
},{
title:'机构管理',
html: Ext.getDom('unitMenus').innerHTML,
border:false,
autoScroll:true,
iconCls:'unit'
},{
title:'系统设置',
html: Ext.getDom('settingMenus').innerHTML,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},contentPanel]
});
//init main page tables
var panel = new Ext.Panel({
id:'main-panel',
baseCls:'x-plain',
renderTo: Ext.get("center"),
layout:'table',
layoutConfig: {columns:2},
defaults: {frame:true, 395, height: 300},
items:[{
title:'公告信息',
colspan:2,
collapsible:true,
800,
contentEl:'afficheDiv'
},{
title:'人事信息',
contentEl:'personDiv'
},{
title:'机构信息',
contentEl:'unitDiv'
}]
});
//clear temp elements.
Ext.getDom("menus").innerHTML="";
});
//定义菜单导航函数
function onClickMenuItem(node)
{
var n = contentPanel.getComponent(node.id);
if (!n) { ////判断是否已经打开该面板
n = contentPanel.add({
'id':node.id,
'title':node.innerHTML,
closable:true,
autoLoad:{url:'tabFrame.jsp?url='+node.href, callback: this.initSearch, scope: this, scripts:true} //通过autoLoad属性载入目标页,如果要用到脚本,必须加上scripts属性
});
}
contentPanel.setActiveTab(n);
}
</script>
<div id="menus">
<div id="userMenus">
<ul class="munuList">
<li>
<span id="person" href="person/default.jsp"
onclick="onClickMenuItem(this)">人员信息</span>
</li>
</ul>
</div>
<div id="unitMenus">
<ul class="munuList">
<li>
<span id="unit" href="unit/default.jsp"
onclick="onClickMenuItem(this)">机构信息</span>
</li>
</ul>
</div>
<div id="settingMenus">
<ul class="munuList">
<li>
<span id="userManager" href="system/default.jsp"
onclick="onClickMenuItem(this)">用户管理</span>
</li>
</ul>
</div>
</div>
<div id="center">
</div>
<div id="afficheDiv">
<p>
尊敬的
<font color=green><B>${user.userName}</B> </font> 用户,欢迎您使用人力资源管理系统.
</p>
<p>
添加公告信息...
</p>
</div>
<div id="personDiv">
<p>
添加人事信息...
</p>
</div>
<div id="unitDiv">
<p>
添加机构信息...
</p>
</div>
</body>
</html>
上面是我们整个应用的主要视图界面，当我们增加一个模块的操作时，只是在主显示区增加一个面板，里面会自动加载tabFrame.jsp：
<%@ page language="java" pageEncoding="utf-8"%>
<IFRAME SRC="<%=request.getParameter("url")%>" width="100%" height="100%" frameborder="0"></IFRAME>
大家看到，里面只有一个公共的浮动框架，用来容纳真正的页面资源。以person为例，当点击左边菜单栏里的人员管理，真正出现在右边选项面板上的页面资源是person/default.jsp：
<%@ page language="java" pageEncoding="utf-8"%>
<html>
<head>
<title>HR Manager Project - base on SSH Framework</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../dwr/engine.js"></script>
<script type="text/javascript" src="../dwr/util.js"></script>
<script type="text/javascript" src="../dwr/interface/personController.js"></script>
<script type="text/javascript" src="../dwr/interface/unitController.js"></script>
<script type="text/javascript" src="../resources/js/ext-base.js"></script>
<script type="text/javascript" src="../resources/js/ext-all.js"></script>
<script type="text/javascript" src="../resources/js/person_init.js"></script>
<style type="text/css">
body {
margin:5px;
font-size:12px;
}
body .x-panel {
margin:5px;
}
body .x-panel {
margin-bottom:20px;
}
.icon-grid {
background-image:url(../resources/icons/grid.png) !important;
}
#button-grid .x-panel-body {
border:1px solid #99bbe8;
border-top:0 none;
}
.add {
background-image:url(../resources/icons/add.gif) !important;
}
.option {
background-image:url(../resources/icons/plugin.gif) !important;
}
.remove {
background-image:url(../resources/icons/delete.gif) !important;
}
.save {
background-image:url(../resources/icons/save.gif) !important;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div id="add-window" class="x-hidden">
<div class="x-window-header">添加人员信息</div>
<div id="content"></div>
</div>
</body>
</html>
里面用到很多js,其中有DWR和ExtJS两个Ajax库的。还有我们自己写的整个模块的核心js文件为/resources/js/person_init.js，在这里提醒下大家，所有的文件引用一定要注意路径。person_init.js完整代码如下：
var ds;
var grid;
var form;
var win;
Ext.onReady(function() {
// get All unit Name for comboBox.
unitController.getRecords(function(data) {
if (data != null) {
var list = [];
for (var i = 0; i < data.length; i++) {
list[i] = [data[i].name, data[i].name,
data[i].description];
}
Ext.grid.unitComboBoxItems = list;
initData();
}
});
});
function initData() {
ds = new Ext.data.Store({
// proxy: new Ext.data.MemoryProxy(jsondata),
proxy : new Ext.data.HttpProxy({
url : '../person.hr?action=list'
}),
reader : new Ext.data.JsonReader({
totalProperty : 'totalProperty',
root : 'root'
}, [{
name : 'id'
}, {
name : 'name'
}, {
name : 'age'
}, {
name : 'gender'
}, {
name : 'unitName'
}, {
name : 'telephone'
}, {
name : 'address'
}])
});
ds.load({
params : {
start : 0,
limit : 10
}
});
initGrid();
}
function getInsertForm() {
if(!form){
form = new Ext.FormPanel({
labelWidth : 75,
url : '../person.hr',
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 340,
defaults : {
width : 230
},
defaultType : 'textfield',
standardSubmit : true,
items : [{
fieldLabel : '姓名',
name : 'name',
allowBlank : false
}, {
fieldLabel : '年龄',
name : 'age'
}, new Ext.form.ComboBox({
fieldLabel : '性别',
hiddenName : 'gender',
store : new Ext.data.SimpleStore({
fields : ['abbr', 'state'],
data : [['男', '男'], ['女', '女']]
}),
valueField : 'abbr',
displayField : 'state',
mode : 'local',
triggerAction : 'all',
emptyText : '请选择一个性别',
forceSelection : true,
selectOnFocus : true,
editable : false
}), new Ext.form.ComboBox({
fieldLabel : '机构名称',
hiddenName : 'unitName',
store : new Ext.data.SimpleStore({
fields : ['abbr', 'state'],
data : Ext.grid.unitComboBoxItems
}),
valueField : 'abbr',
displayField : 'state',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择一个单位名',
selectOnFocus : true,
editable : false
}), {
fieldLabel : '电话',
name : 'telephone'
}, {
fieldLabel : '地址',
name : 'address'
}]
});
}
return form;
}
function getUpdateForm() {
win.title = '编辑员工信息';
if(!form){
form = new Ext.FormPanel({
labelWidth : 75,
url : '../person.hr',
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 340,
defaults : {
width : 230
},
defaultType : 'textfield',
standardSubmit : true,
items : [{
fieldLabel : 'id',
name : 'id',
readOnly : true
}, {
fieldLabel : '姓名',
name : 'name',
allowBlank : false
}, {
fieldLabel : '年龄',
name : 'age'
}, new Ext.form.ComboBox({
fieldLabel : '性别',
hiddenName : 'gender',
store : new Ext.data.SimpleStore({
fields : ['abbr', 'state'],
data : [['男', '男'],
['女', '女']]
}),
valueField : 'abbr',
displayField : 'state',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择性别',
forceSelection : true,
selectOnFocus : true,
editable : false
}), new Ext.form.ComboBox({
fieldLabel : '机构名称',
hiddenName : 'unitName',
store : new Ext.data.SimpleStore({
fields : ['abbr', 'state'],
data : Ext.grid.unitComboBoxItems
}),
valueField : 'abbr',
displayField : 'state',
typeAhead : true,
mode : 'local',
triggerAction : 'all',
emptyText : '请选择机构.',
selectOnFocus : true,
editable : false
}), {
fieldLabel : '电话',
name : 'telephone'
}, {
fieldLabel : '地址',
name : 'address'
}]
});
}
return form;
}
function initGrid() {
Ext.QuickTips.init();
var xg = Ext.grid;
// //////////////////////////////////////////////////////////////////////////////////////
// form
// //////////////////////////////////////////////////////////////////////////////////////
if (!form) {
form = getInsertForm();
}
// //////////////////////////////////////////////////////////////////////////////////////
// win
// //////////////////////////////////////////////////////////////////////////////////////
if (!win) {
win = new Ext.Window({
el : 'add-window',
layout : 'fit',
width : 380,
height : 280,
closeAction : 'hide',
plain : true,
items : form,
buttons : [{
text : '保存',
handler : function() {
form.getForm().submit({
failure : function(retForm, retAction) {
if (retAction.result
&& retAction.result == '1') {
Ext.MessageBox.alert('提示', '保存数据成功！');
win.hide();
grid.destroy();
initData();
} else if (retAction.result
&& retAction.result == 'error') {
Ext.MessageBox.alert('提示', '保存数据失败！');
} else {
Ext.MessageBox.alert('提示', '保存数据出错！');
}
},
waitMsg : '保存数据...'
});
}
}, {
text : '清空',
handler : function() {
form.getForm().reset();
}
}, {
text : '关闭',
handler : function() {
win.hide();
}
}]
});
}
// ////////////////////////////////////////////////////////////////////////////////
// Grid
// //////////////////////////////////////////////////////////////////////////////////////
var sm = new xg.CheckboxSelectionModel();
grid = new xg.GridPanel({
id : 'button-grid',
ds : ds,
cm : new xg.ColumnModel([sm, {
id : 'id',
header : "员工号",
width : 30,
sortable : true,
dataIndex : 'id'
}, {
header : "姓名",
width : 40,
sortable : true,
dataIndex : 'name'
}, {
header : "年龄",
width : 10,
sortable : true,
dataIndex : 'age'
}, {
header : "性别",
width : 10,
sortable : true,
dataIndex : 'gender'
}, {
header : "所属机构",
width : 40,
sortable : true,
dataIndex : 'unitName'
}, {
header : "联系电话",
width : 20,
sortable : true,
dataIndex : 'telephone'
}, {
header : "家庭地址",
width : 50,
sortable : true,
dataIndex : 'address'
}]),
sm : sm,
stripeRows : true,
viewConfig : {
forceFit : true
},
// inline toolbars
tbar : [{
text : '添加',
tooltip : '添加一条人员信息',
iconCls : 'add',
onClick : function() {
// update form to insert form
form = getInsertForm();
var items = new Ext.util.MixedCollection();
items.add("form", form);
win.items = items;
win.show(this);
form.getForm().reset();
}
}, '-', {
text : '修改',
tooltip : '修改一条人员信息',
iconCls : 'option',
onClick : function() {
if (sm.getCount() == 1) {
// update form to insert form
form = getUpdateForm();
var items = new Ext.util.MixedCollection();
items.add("form", form);
win.items = items;
win.show(this);
form.getForm().reset();
form.getForm().loadRecord(sm.getSelected());
} else {
Ext.MessageBox.alert('提示', '请选择一条记录！');
}
}
}, '-', {
text : '删除',
tooltip : '删除选择的人员信息',
iconCls : 'remove',
onClick : function() {
if (sm.hasSelection()) {
Ext.MessageBox.confirm('提示', '你确定要删除这些人员么?',
function(button) {
if (button == 'yes') {
var list = sm.getSelections();
var rList = [];
for (var i = 0; i < list.length; i++) {
rList[i] = list[i].data["id"];
}
personController.removeRecords(
rList, function(data) {
if (data > 0) {
Ext.MessageBox
.alert(
'提示',
"删除"
+ data
+ '条数据成功!');
grid.destroy();
initData();
} else {
Ext.MessageBox
.alert(
'提示',
"删除数据失败!");
}
});
}
});
} else {
Ext.MessageBox.alert('提示', "请至少选择一条记录!");
}
}
}],
bbar : new Ext.PagingToolbar({
pageSize : 10,
store : ds,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg : "没有记录"
}),
width : 815,
autoHeight : true,
// frame:true,
title : '人员信息列表',
iconCls : 'icon-grid',
renderTo : document.body
});
};
上面是我们整个ExtJS应用的关键代码，它构建了窗口，表单，表格，分页栏等主要ExtJS的组件，指明了页面加载后需要动态获取的数据，为表单和按钮动态添加了异步访问服务器的事件。这里的代码希望大家好好研读。还有两个模块的JSP和JS文件和上面人员管理模块雷同，我这里就不列出来了。大家理解了之后可以自己试着写一下。这样，我们整个HRMS应用就已经构建完毕。下一篇文章我们来做一个总结。