1.jobInfo.jsp
1 <%@ page language="java" pageEncoding="UTF-8"%> 2 <script type="text/javascript"> 3 var jobGrid = new jobInfoGrid(); 4 var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1]; 5 juage(tabId,"job",jobGrid, "job"); 6 </script> 7 <div id="job"></div>
2.部门职业js
1 /** 2 * @author sux 3 * @time 2011-1-15 4 * @desc 部门职位管理 5 */ 6 /** 7 * @author sux 8 * @time 2011-1-15 9 * @desc 部门职位管理 10 */ 11 jobInfoGrid = Ext.extend(Ext.grid.GridPanel,{ 12 id: 'jobGrid', 13 constructor: function(){ 14 Ext.QuickTips.init(); 15 var dept = new depart("部门"); 16 var number = new Ext.grid.RowNumberer(); 17 var sm = new Ext.grid.CheckboxSelectionModel(), 18 jobInfoStore = new Ext.data.JsonStore({ 19 url: 'job_list.action', 20 root: 'root', 21 totalProperty: 'totalProperty', 22 //nocache: true, 23 /*下面fields中利用convert获取json中嵌套的对象*/ 24 fields: [{name: 'department',convert: function(v){return v.deptName}},'jobId','jobName','jobBasicWage','jobRemark','operator'] 25 }); 26 jobInfoGrid.superclass.constructor.call(this,{ 27 Ext.getCmp('mainTab').getActiveTab().getInnerWidth(), 28 height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(), 29 monitorResize: true, 30 doLayout: function() { 31 this.setWidth(document.body.clientWidth-205); 32 this.setHeight(document.body.clientHeight-140); 33 Ext.grid.GridPanel.prototype.doLayout.call(this); 34 } , 35 viewConfig: { 36 forceFit: true 37 }, 38 autoWidth: true, 39 sm : sm, 40 /*这里不需要这设置此参数autoHeight: true，在相应的JSP文件中设置了Grid的宽度和高度，加了只会画蛇添足*/ 41 //表格列模式的配置数组 42 columns: [ 43 number, sm, 44 { 45 ////表头文字 46 header: '部门名称', 47 //设置列与数据集中数据记录的对应关系，值为数据记录中的字段名称 48 dataIndex: 'department', 49 align: 'center' 50 },{ 51 header: '职位编号', 52 dataIndex: 'jobId', 53 id: 'jobId', 54 align: 'center' 55 },{ 56 header: '职位名称', 57 dataIndex: 'jobName', 58 align: 'center' 59 },{ 60 header: '岗位工资', 61 dataIndex: 'jobBasicWage', 62 align: 'center' 63 },{ 64 header: '备注', 65 dataIndex: 'jobRemark', 66 ////渲染器 67 renderer: Ext.hrmsys.grid.tooltip.subLength, 68 align: 'center' 69 }], 70 //表格数据集对象 71 store: jobInfoStore, 72 // //是否在加载数据时显示遮罩效果 73 loadMask: {msg: '数据正在加载中,请稍后!'}, 74 //工具栏 75 tbar: new Ext.Toolbar({ 76 style: 'padding-left: 5px;', 77 items: ['部门:',dept,{ 78 text: ' 查询', 79 tooltip: '查询职位', 80 iconCls: 'search', 81 id: 'job_query', 82 hidden: 'true', 83 handler: this.viewJob 84 },{ 85 text: '删除', 86 id: 'job_delete', 87 iconCls: 'delete', 88 tooltip: '删除职位', 89 hidden: 'true', 90 handler: this.delJobFn 91 },{ 92 text: '添加', 93 id: 'job_add', 94 tooltip: '添加职位', 95 iconCls: 'add', 96 hidden: 'true', 97 handler: this.addJobFn 98 },{ 99 text: '修改', 100 tooltip: '修改职位', 101 hidden: 'true', 102 iconCls: 'update', 103 id: 'job_update', 104 handler: this.updateFn 105 }] 106 }), 107 //分页 108 bbar: new PagingToolbar(jobInfoStore, 20) 109 }); 110 111 jobInfoStore.load({ 112 params: { 113 deptId: "", 114 start: 0, 115 limit: 20 116 } 117 }); 118 }, 119 viewJob: function(){ 120 /*Ext.get('deptValue').dom.value 121 Ext.get('deptValue').getValue() 122 Ext.getCmp('deptValue').getRawValue() 123 以上三种可获得displayField 124 下面方法为获得valueField值 125 */ 126 var deptValue = Ext.getCmp('deptValue部门').getValue(); 127 //重新加载数据 128 Ext.getCmp("jobGrid").getStore().load({ 129 params: { 130 deptId: deptValue, 131 start: 0, 132 limit: 20 133 } 134 }); 135 }, 136 delJobFn: function(){ 137 gridDel('jobGrid','jobId', 'job_delete.action'); 138 }, 139 addJobFn: function(){ 140 var jobAddWin = new JobAddWin(); 141 jobAddWin.show(); 142 }, 143 updateFn: function(){ 144 var jobAddWin = new JobAddWin(); 145 jobAddWin.title = '职位信息修改'; 146 var selectionModel = Ext.getCmp('jobGrid').getSelectionModel(); 147 var record = selectionModel.getSelections(); 148 if(record.length != 1){ 149 Ext.Msg.alert('提示','请选择一个'); 150 return; 151 } 152 var jobId = record[0].get('jobId'); 153 //Ext.getCmp('jobAddFormId').dept.setValue(jobId); 154 Ext.getCmp('jobAddFormId').getForm().load({ 155 url: 'job_intoUpdate.action', 156 params: { 157 jobId: jobId 158 } 159 }) 160 jobAddWin.show(); 161 } 162 });
3.部门js
1 /** 2 * 创建部门的下拉框，显示出所有部门 3 * 4 * @param {Object} 5 * labelName 6 * @memberOf {TypeName} 7 */ 8 /** 9 * 创建部门的下拉框，显示出所有部门 10 * @param {Object} labelName 11 * @memberOf {TypeName} 12 */ 13 depart = Ext.extend(Ext.form.ComboBox,{ 14 deptStore: null, 15 //注意传入参数labelName，因为其作id的一部分，避免出现相同的id 16 constructor: function(labelName){ 17 //创建记录格式 18 // defaultRecord = Ext.data.Record.create([{name: 'deptId', type: 'string'},{name: 'deptName', type:'string'}]); 19 // var defaultData = new defaultRecord({deptId: '0', deptName: '全部'}); 20 21 deptStore = new Ext.data.JsonStore({ 22 url:'dept_show.action', 23 autoLoad: true, 24 fields: ['deptId','deptName'] 25 // //监听事件在加载时加入"全部"记录 26 // listeners:{'load':function(){ 27 // deptStore.insert(0,defaultData); 28 // }} 29 }); 30 //通过 SubClass.superclass.constructor.call(this); 31 //就可以直接调用父类的构造函数，这个函数的第一个参数总是 this， 32 //以确保父类的构造函数在子类的作用域里工作。 33 depart.superclass.constructor.call(this,{ 34 id: 'deptValue'+labelName, 35 fieldLabel: labelName, 36 displayField: 'deptName', 37 valueField: 'deptId', 38 hiddenName: 'deptId', 39 emptyText: '全部', 40 100, 41 store: deptStore, 42 triggerAction: 'all', //显示所有 43 editable: false 44 }) 45 } 46 }); 47 /** 48 * 不带全部的dept下拉框 49 * @param {Object} labelName 50 * @param {Object} hiddenName 51 * @memberOf {TypeName} 52 */ 53 DepartJob = Ext.extend(Ext.form.ComboBox,{ 54 deptStore: null, 55 //注意传入参数labelName，因为其作id的一部分，避免出现相同的id 56 constructor: function(labelName, hiddenName){ 57 deptStore = new Ext.data.JsonStore({ 58 autoLoad: true, //设为自动加载，以便实现修改时选中某值 59 url:'dept_show.action', 60 fields: ['deptId','deptName'] 61 }); 62 DepartJob.superclass.constructor.call(this,{ 63 id: 'deptValue'+labelName, 64 fieldLabel: labelName, 65 displayField: 'deptName', 66 valueField: 'deptId', 67 emptyText: '请选择', 68 hiddenName: hiddenName, 69 100, 70 store: deptStore, 71 triggerAction: 'all', //显示所有 72 editable: false, 73 allowBlank: false, 74 msgTarget: 'side', 75 blankText: '请选择' 76 }) 77 } 78 });
3.新建部门
1 Ext.namespace("hrmsys.job.add"); 2 //新建一个窗口 3 JobAddWin = Ext.extend(Ext.Window,{ 4 id:'jobAddWinId', 5 addForm:null, 6 constructor:function(){ 7 addForm = new JobAddForm(); 8 JobAddWin.superclass.constructor.call(this,{ 9 title: '职位录入', 10 400, 11 modal: true, 12 height: 300, 13 collapsible: true, 14 colsable: true, 15 layout: 'form', 16 items: [addForm] 17 }); 18 } 19 }); 20 21 //新建一个form面板 22 JobAddForm = Ext.extend(Ext.form.FormPanel,{ 23 id: 'jobAddFormId', 24 dept: null, 25 constructor: function(){ 26 Ext.QuickTips.init(); 27 //加载后台数据，进行转换 28 var reader = new Ext.data.JsonReader({},[{ 29 name: 'deptId', mapping: 'department.deptId' 30 },{ 31 name: 'job.jobName', mapping: 'jobName' 32 },{ 33 name: 'job.jobBasicWage', mapping: 'jobBasicWage' 34 },{ 35 name: 'job.jobRemark', mapping: 'jobRemark' 36 },{ 37 name: 'job.jobId', mapping: 'jobId' 38 }]); 39 this.dept = new depart("所在部门"); 40 JobAddForm.superclass.constructor.call(this, { 41 labelWidth: 80, 42 padding: '20 0 0 50', 43 // 设置表单执行load读取数据时的数据读取器 44 reader: reader, 45 labelAlign: 'right', 46 border: false, 47 frame: true, 48 items: [this.dept,{ 49 xtype: 'textfield', 50 fieldLabel: '新增职位', 51 allowBlank: false, 52 msgTarget: 'side', 53 blankText: '不能为空', 54 emptyText: '不能为空', 55 150, 56 name: 'job.jobName', 57 listeners: {'blur': this.jobBlurFn} 58 },{ 59 xtype: 'textfield', 60 150, 61 fieldLabel: '岗位工资', 62 name: 'job.jobBasicWage', 63 regex: /^[0-9]+(.[0-9]{2})?$/, 64 regexText: '只能输入数字(可两位小数)', 65 msgTarget: 'side' 66 },{ 67 xtype: 'textarea', 68 fieldLabel: '备注', 69 150, 70 height: 120, 71 name: 'job.jobRemark' 72 },{ 73 xtype: 'hidden',//隐藏值 74 name: 'job.jobId' 75 }], 76 buttonAlign: 'center', 77 buttons: [{ 78 text: '保存', 79 handler: function(){ 80 if(!Ext.getCmp('jobAddFormId').getForm().isValid()){ 81 return; 82 } 83 Ext.getCmp('jobAddFormId').getForm().submit({ 84 url: 'job_saveOrUpdate.action', 85 method: 'post', 86 waitMsg: '正在保存数据...', 87 waitTitle: '提示', 88 scop: this, 89 success: save_success, 90 failure: save_failure 91 }) 92 } 93 },{ 94 text: '关闭', 95 handler: function(){ 96 Ext.getCmp('jobAddWinId').destroy(); 97 } 98 }] 99 }) 100 }, 101 //焦点离开 102 jobBlurFn:function(obj){ 103 Ext.Ajax.request({ 104 url: 'job_unique.action', 105 params: { 106 jobName: obj.getValue() 107 }, 108 success: function(response, options){ 109 var data = Ext.util.JSON.decode(response.responseText); 110 if(data.msg != ""){ 111 obj.markInvalid("该职位已存在!"); 112 } 113 }, 114 failure: hrmsys.util.common.failure 115 }); 116 } 117 }); 118 //保存成功 119 save_success = function(form,action){ 120 Ext.Msg.confirm('提示',action.result.msg,function(button,text){ 121 if(button=="yes"){ 122 form.reset(); 123 //保存成功销毁窗口 124 Ext.getCmp('jobAddWinId').destroy(); 125 Ext.getCmp('jobGrid').getStore().reload();//刷新部门显示列表 126 } 127 }); 128 } 129 //保存失败 130 save_failure = function(form, action){ 131 Ext.Msg.alert('提示',"连接失败", function(){ 132 133 }); 134 };
5.工具栏
1 Ext.namespace("hrmsys.util.common"); 2 3 4 /** 5 * 判断工号唯一性 6 * @param {Object} empId 7 */ 8 hrmsys.util.common.empId = function(obj){ 9 var empId = obj.getValue(); 10 var id = obj.id; 11 Ext.Ajax.request({ 12 url: 'emp_isExist.action', 13 success: function(response, options){ 14 if(response.responseText != ""){ 15 Ext.getCmp(id).markInvalid('此工号已存在'); 16 } 17 }, 18 failure: hrmsys.util.common.failure, 19 params: { 20 empId: empId 21 } 22 }) 23 }; 24 hrmsys.util.common.failure = function (){ 25 Ext.Msg.alert('提示','连接后台失败'); 26 }
6.删除表格，工具栏显示
1 /** 2 * 删除表格中选中的内容 3 * @param {Object} panelId 表单面板的Id 4 * @param {Object} delId 数据库的删除时依据的属性 5 * @param {Object} url 提交的URL 6 * @return {TypeName} 7 */ 8 9 function gridDel(panelId, delId, url){ 10 var oSelMode = Ext.getCmp(panelId).getSelectionModel(); 11 var oRecords = oSelMode.getSelections(); 12 var ids = ""; 13 for(var i=0;i<oRecords.length;i++){ 14 ids += oRecords[i].get(delId); 15 if(i != oRecords.length-1) ids += ","; 16 }; 17 if(ids != null && ids != ""){ 18 Ext.Msg.confirm("提示","确定删除",function(button, text){ 19 if(button == "yes"){ 20 Ext.Ajax.request({ 21 url: url, 22 success: function(response, options){ 23 var datas = Ext.util.JSON.decode(response.responseText); 24 Ext.Msg.alert("提示", datas.msg, function(){ 25 Ext.getCmp(panelId).getStore().reload(); 26 }) 27 }, 28 failure: function(response, options){ 29 Ext.Msg.alert("提示", '连接失败', function(){}) 30 }, 31 params: { 32 ids: ids 33 } 34 }) 35 } 36 }) 37 }else{ 38 Ext.Msg.alert("提示","请先选择",function(){}); 39 } 40 }; 41 /** 42 * 分页栏类 43 * @param {Object} store 表格存储store 44 * @param {Object} pageSize 页面大小 45 * @memberOf {TypeName} 46 */ 47 PagingToolbar = Ext.extend(Ext.PagingToolbar, { 48 constructor: function(store, pageSize){ 49 PagingToolbar.superclass.constructor.call(this, { 50 store: store, 51 pageSize: pageSize, //页面大小 52 displayInfo: true, 53 displayMsg : '共<font color="red"> {2} </font>条记录,当前页记录索引<font color="red"> {0} - {1}</font> ', 54 emptyMsg: '没有数据', 55 refreshText: '刷新', 56 firstText: '第一页', 57 prevText: '前一页', 58 nextText: '下一页', 59 lastText: '最后一页' 60 }) 61 } 62 })
7.
1 /** 2 * 根据用户权限显示不同的页面 3 * 前后得到的菜单节点id和后台用户的角色id查询数据库获得用户权限 4 * @param {Object} id 页面id,本质是菜单节点的id 5 * @param {Object} page 按钮id前缀 6 * @param {Object} cmp 组件 7 * @param {Object} renderId 渲染的id 8 */ 9 function juage(id,page,cmp, renderId){ 10 //设置遮罩，当按钮隐藏之后，再隐藏遮罩 11 var myMask = new Ext.LoadMask('mainTab', {msg:"请稍等..."}); 12 myMask.show(); 13 Ext.Ajax.request({ 14 url: 'permission_permission.action', 15 method: 'post', 16 success: function (response, options){ 17 var datas = response.responseText; 18 if(datas != ''){ 19 var fn = datas.split(' '); 20 for(var i = 0; i< fn.length; i++){ 21 var comp = Ext.getCmp(page+'_'+fn[i]); 22 if(comp){ 23 comp.show(); //将没有权限的按钮隐藏hiden 24 } 25 } 26 } 27 cmp.render(renderId); 28 myMask.hide(); 29 }, 30 failure: function(response, options){ 31 Ext.Msg.alert('提示','连接后台失败'); 32 }, 33 params: { 34 menuId: id 35 } 36 }) 37 };