53. 部门信息显示 EXTJS 单击树节点
1.
1 /** 2 * @author sux 3 * @time 2011-1-14 4 * @desc 部门信息显示 5 */ 6 deptInfoGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{ 7 id: 'deptInfoPanel', 8 //renderTo: Ext.getBody(), //渲染到body 9 constructor: function(){ 10 Ext.QuickTips.init(); 11 this['store'] = new Ext.data.JsonStore({ 12 url: 'dept_list.action', 13 root: 'root', 14 totalProperty: 'totalProperty', 15 //record 16 fields: ['deptId','deptName', 17 'deptNum','deptMgr','deptRemark'] 18 }); 19 var rowNumber = new Ext.grid.RowNumberer(); //序列号 20 var checkbox = new Ext.grid.CheckboxSelectionModel(); //{默认是多选singleSelect: false} 21 deptInfoGridPanel.superclass.constructor.call(this,{ 22 Ext.getCmp('mainTab').getActiveTab().getInnerWidth(), 23 height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(), 24 /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/ 25 monitorResize: true, 26 doLayout: function() { 27 this.setWidth(document.body.clientWidth-205); 28 this.setHeight(document.body.clientHeight-140); 29 Ext.grid.GridPanel.prototype.doLayout.call(this); 30 } , 31 /**end**/ 32 viewConfig: { 33 forceFit: true, 34 columnsText : "显示/隐藏列", 35 sortAscText : "正序排列", 36 sortDescText : "倒序排列" 37 }, 38 sm: checkbox, 39 columns: [ 40 rowNumber, checkbox, 41 { 42 header: '部门编号', 43 dataIndex: 'deptId', 44 align: 'center' 45 },{ 46 header: '部门名称', 47 dataIndex: 'deptName', 48 align: 'center' 49 },{ 50 header: '部门人数', 51 dataIndex: 'deptNum', 52 align: 'center' 53 },{ 54 header: '部门经理', 55 dataIndex: 'deptMgr', 56 align: 'center' 57 },{ 58 header: '备注', 59 dataIndex: 'deptRemark', 60 name: 'deptRemark', 61 renderer: Ext.hrmsys.grid.tooltip.subLength, 62 align: 'center' 63 }], 64 tbar: new Ext.Toolbar({ 65 style: 'padding: 5px;', 66 id: 'departToolbar', 67 items: ['条目:',{ 68 xtype: 'combo', 69 80, 70 triggerAction: 'all', 71 editable: false, 72 mode: 'local', 73 store: new Ext.data.SimpleStore({ 74 fields: ['name','value'], 75 data: [[" ","全部"],["deptId","部门编号"],["deptName","部门名称"],["deptMgr","部门经理"]] 76 }), 77 id: 'condition_dept', 78 displayField: 'value', 79 valueField: 'name', 80 emptyText: '请选择' 81 },'内容:',{ 82 id: 'condition_dept_value', 83 xtype: 'textfield', 84 listeners : { 85 specialkey : function(field, e) {//添加回车事件 86 if (e.getKey() == Ext.EventObject.ENTER) { 87 queryDeptFn(); 88 } 89 } 90 } 91 },{ 92 text: '查询', 93 tooltip: '查询部门', 94 iconCls: 'search', 95 hidden: 'true', 96 id: 'dept_query', 97 handler: queryDeptFn 98 },{ 99 text: '删除', 100 tooltip: '删除部门', 101 id: 'dept_delete', 102 iconCls: 'delete', 103 hidden: 'true', 104 handler: delDeptFn 105 },{ 106 text: '添加', 107 tooltip: '添加部门', 108 id: 'dept_add', 109 hidden: 'true', 110 iconCls: 'add', 111 handler: addDeptFn 112 },{ 113 text: '修改', 114 id: 'dept_update', 115 iconCls: 'update', 116 hidden: 'true', 117 tooltip: '修改部门', 118 handler: updateDeptFn 119 }] 120 }), 121 bbar: new PagingToolbar(this['store'], 20) 122 }); 123 this.getStore().load({ 124 params:{ 125 start: 0, 126 limit: 20 127 } 128 }); 129 //new Ext.Viewport().render(); 130 } 131 }); 132 133 addDeptFn = function(){ 134 deptAddWin = new DeptAddWin(); 135 deptAddWin.show(); 136 }; 137 138 delDeptFn = function(){ 139 gridDel('deptInfoPanel','deptId', 'dept_delete.action'); 140 }; 141 142 updateDeptFn = function(){ 143 deptAddWin = new DeptAddWin(); 144 deptAddWin.title = '部门信息修改'; 145 var selectionModel = Ext.getCmp('deptInfoPanel').getSelectionModel(); 146 var record = selectionModel.getSelections(); 147 if(record.length != 1){ 148 Ext.Msg.alert('提示','请选择一个'); 149 return; 150 } 151 var deptId = record[0].get('deptId'); 152 Ext.getCmp('deptAddFormId').getForm().load({ 153 url: 'dept_intoUpdate.action', 154 params: { 155 deptId: deptId 156 } 157 }) 158 deptAddWin.show(); 159 }; 160 161 queryDeptFn = function(){ 162 var condition = Ext.getCmp('condition_dept').getValue(); 163 var conditionValue = Ext.getCmp("condition_dept_value").getValue(); 164 Ext.getCmp("deptInfoPanel").getStore().reload({ 165 params: { 166 condition: condition, 167 conditionValue : conditionValue, 168 start: 0, 169 limit: 20 170 } 171 }) 172 };
2.添加一个新的部门窗口
1 Ext.namespace("hrmsys.dept.add"); 2 //新建一个window窗口 3 DeptAddWin = Ext.extend(Ext.Window,{ 4 id: 'deptAddWinId', 5 addForm: null, 6 constructor: function(){ 7 addForm = new DeptAddForm(); 8 DeptAddWin.superclass.constructor.call(this,{ 9 title: '部门录入', 10 400, 11 modal: true, 12 height: 350, 13 collapsible: true, 14 colsable: true, 15 layout: 'form', 16 items: [addForm] 17 }) 18 } 19 }) 20 //窗口里包含一个Form面板 21 DeptAddForm = Ext.extend(Ext.form.FormPanel,{ 22 id: 'deptAddFormId', 23 constructor: function(){ 24 Ext.QuickTips.init(); 25 //加载后台数据，进行转换 26 var reader = new Ext.data.JsonReader({},[{ 27 name: 'dept.deptId' , mapping: 'deptId' 28 },{ 29 name: 'dept.deptName', mapping: 'deptName' 30 },{ 31 name: 'dept.deptMgr', mapping: 'deptMgr' 32 },{ 33 name: 'dept.deptRemark', mapping: 'deptRemark' 34 }]); 35 DeptAddWin.superclass.constructor.call(this, { 36 labelWidth: 80, 37 padding: '20 0 0 50', 38 reader: reader, 39 labelAlign: 'right', 40 border: false, 41 frame: true, 42 items: [{ 43 xtype: 'textfield', 44 fieldLabel: '部门编号', 45 allowBlank: false, 46 msgTarget: 'side', 47 blankText: '不能为空', 48 emptyText: '不能为空', 49 150, 50 name: 'dept.deptId' 51 },{ 52 xtype: 'textfield', 53 fieldLabel: '部门名称', 54 allowBlank: false, 55 msgTarget: 'side', 56 blankText: '不能为空', 57 emptyText: '不能为空', 58 150, 59 name: 'dept.deptName' 60 },{ 61 xtype: 'textfield', 62 150, 63 fieldLabel: '部门经理工号', 64 id: 'empId', 65 msgTarget: 'side', 66 listeners: {'blur': blurFn} 67 },{ 68 xtype: 'textfield', 69 fieldLabel: '部门经理姓名', 70 150, 71 id: 'empName', 72 name: 'dept.deptMgr', 73 readOnly: true 74 },{ 75 xtype: 'textarea', 76 fieldLabel: '备注', 77 150, 78 height: 150, 79 name: 'dept.deptRemark' 80 }], 81 buttonAlign: 'center', 82 buttons: [{ 83 text: '保存', 84 handler: function(){ 85 //验证表单填写的数据是否有效 86 if(!Ext.getCmp('deptAddFormId').getForm().isValid()){ 87 return; 88 } 89 //提交表单 90 Ext.getCmp('deptAddFormId').getForm().submit({ 91 url: 'dept_save.action', 92 method: 'post', 93 waitMsg: '正在保存数据...', 94 waitTitle: '提示', 95 scope: this, 96 success: saveDeptSuccessFn, 97 failure: save_failure 98 }) 99 } 100 },{ 101 text: '关闭', 102 handler: function(){ 103 Ext.getCmp('deptAddWinId').destroy(); 104 } 105 }] 106 }) 107 } 108 }); 109 110 //提交表单成功处理函数 111 saveDeptSuccessFn = function(form, action){ 112 //消息提示框 113 Ext.Msg.confirm('提示', action.result.msg, function(button, text){ 114 if(button == "yes"){ 115 form.reset(); 116 //销毁面板 117 Ext.getCmp('deptAddWinId').destroy(); 118 //reload()重新加载数据时 119 Ext.getCmp('deptInfoPanel').getStore().reload();//刷新部门显示列表 120 } 121 }); 122 }; 123 124 //提交失败处理函数 125 save_failure = function(form, action){ 126 Ext.Msg.alert('提示',"连接失败", function(){ 127 128 }); 129 }; 130 //工号失焦点事件 131 blurFn = function(value){ 132 var empId = value.getRawValue(); 133 Ext.Ajax.request({ 134 url: 'emp_isExist.action', 135 method: 'post', 136 params: { 137 empId: empId 138 }, 139 success: isExistSuccessFn, 140 failure: save_failure 141 }) 142 }; 143 isExistSuccessFn = function(response, options){ 144 if(response.responseText != "") 145 Ext.get('empName').dom.value = response.responseText; 146 else{
////成批设置表单字段为验证无效 147 Ext.getCmp('empId').markInvalid('此工号不存在'); 148 } 149 };
3.删除部门
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 //中某一行值 11 var oSelMode = Ext.getCmp(panelId).getSelectionModel(); 12 //某一列的值 13 var oRecords = oSelMode.getSelections(); 14 var ids = ""; 15 for(var i=0;i<oRecords.length;i++){ 16 ids += oRecords[i].get(delId); 17 if(i != oRecords.length-1) ids += ","; 18 }; 19 if(ids != null && ids != ""){ 20 Ext.Msg.confirm("提示","确定删除",function(button, text){ 21 if(button == "yes"){ 22 Ext.Ajax.request({ 23 url: url, 24 success: function(response, options){ 25 var datas = Ext.util.JSON.decode(response.responseText); 26 Ext.Msg.alert("提示", datas.msg, function(){ 27 Ext.getCmp(panelId).getStore().reload(); 28 }) 29 }, 30 failure: function(response, options){ 31 Ext.Msg.alert("提示", '连接失败', function(){}) 32 }, 33 params: { 34 ids: ids 35 } 36 }) 37 } 38 }) 39 }else{ 40 Ext.Msg.alert("提示","请先选择",function(){}); 41 } 42 }; 43 /** 44 * 分页栏类 45 * @param {Object} store 表格存储store 46 * @param {Object} pageSize 页面大小 47 * @memberOf {TypeName} 48 */ 49 PagingToolbar = Ext.extend(Ext.PagingToolbar, { 50 constructor: function(store, pageSize){ 51 PagingToolbar.superclass.constructor.call(this, { 52 store: store, 53 pageSize: pageSize, //页面大小 54 displayInfo: true, 55 displayMsg : '共<font color="red"> {2} </font>条记录,当前页记录索引<font color="red"> {0} - {1}</font> ', 56 emptyMsg: '没有数据', 57 refreshText: '刷新', 58 firstText: '第一页', 59 prevText: '前一页', 60 nextText: '下一页', 61 lastText: '最后一页' 62 }) 63 } 64 })
4.部门信息jsp页面
1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 2 <script type="text/javascript"> 3 var deptPanel = new deptInfoGridPanel(); 4 var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1]; 5 juage(tabId,"dept",deptPanel,"tab"); 6 //deptPanel.render("tab"); 7 </script> 8 <div id="tab" ></div>
5.
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 //1.调用组件的render方法 28 //renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子，个人是这么理解，如果你不是可以看下本文 29 cmp.render(renderId); 30 myMask.hide(); 31 }, 32 failure: function(response, options){ 33 Ext.Msg.alert('提示','连接后台失败'); 34 }, 35 params: { 36 menuId: id 37 } 38 }) 39 };