CSDN博客

img lenotang

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

发表于2008/10/2 17:06:00  6276人阅读

 

现在我们就来看看我们的页面设计部分。首先是登陆页面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">

                                                 用户名&nbsp;:&nbsp;

                                                 <input type="text" id="userName" size="20" />

                                          </div>

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

                                                 &nbsp;:&nbsp;

                                                 <input type="password" id="passWord" size="22" />

                                          </div>

                                          <div align="right" class="logon-body-table-tr-td-div-div">

                                                 <button id="logon">

                                                       

                                                 </button>

                                                 &nbsp;&nbsp;&nbsp;&nbsp;

                                                 <button id="close">

                                                       

                                                 </button>

                                                 &nbsp;&nbsp;&nbsp;&nbsp;

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

                              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>

 

              <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,其中有DWRExtJS两个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的组件,指明了页面加载后需要动态获取的数据,为表单和按钮动态添加了异步访问服务器的事件。这里的代码希望大家好好研读。还有两个模块的JSPJS文件和上面人员管理模块雷同,我这里就不列出来了。大家理解了之后可以自己试着写一下。这样,我们整个HRMS应用就已经构建完毕。下一篇文章我们来做一个总结。

0 0

相关博文

我的热门文章

img
取 消
img