ExtJS+DWR+Spring+Hibernate开发HRMS(4)

来源：互联网发布：cad编程语言编辑：程序博客网时间：2024/05/16 03:20

现在我们就来看看我们的页面设计部分。首先是登陆页面logon.jsp：

<%@ page language="java" pageEncoding="utf-8"%>

<html>

<head>

<title>HR Manager Project</title>

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>

用户名 : 

</div>

密码 : 

</div>

登陆

</button>

关闭

</button>

</div>

<div id="msg" align="right"

class="logon-body-table-tr-td-div-message">

</div>

</td>

</tr>

</table>

</body>

</html>

下面是主页面index.jsp,主要用ExtJs构建，登陆成功后就可以进入，主要分为3个模块，员工管理，机构管理和用户管理。在员工管理里面，我们实现了对员工的CRUD并且分页显示员工信息：

<%@ page language="java" pageEncoding="utf-8"%>

<html>

<head>

<title>HR Manager</title>

.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 {

}

.unit {

!important;

}

.settings {

}

.tabs {

}

.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>

//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,

width: 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, width:395, height: 300},

items:[{

title:'公告信息',

colspan:2,

collapsible:true,

width: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>

<li>

<span id="person" href="person/default.jsp"

onclick="onClickMenuItem(this)">人员信息</span>

</li>

</ul>

</div>

<li>

<span id="unit" href="unit/default.jsp"

onclick="onClickMenuItem(this)">机构信息</span>

</li>

</ul>

</div>

<li>

<span id="userManager" href="system/default.jsp"

onclick="onClickMenuItem(this)">用户管理</span>

</li>

</ul>

</div>

</div>

<p>

尊敬的

<font color=green><B>${user.userName}</B> </font> 用户,欢迎您使用人力资源管理系统.

</p>

<p>

添加公告信息...

</p>

</div>

<p>

添加人事信息...

</p>

</div>

<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>

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>

</head>

<body>

<div class="x-window-header">添加人员信息</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应用就已经构建完毕。下一篇文章我们来做一个总结。