57.部门职位管理 ExtJs 展示

1.jobInfo.jsp

 <%@ page language="java" pageEncoding="UTF-8"%>
 <script type="text/javascript">
     var jobGrid = new jobInfoGrid();
     var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
     juage(tabId,"job",jobGrid, "job");
 </script>
 <div id="job"></div>

2.部门职业js

 /**
  * @author sux
  * @time 2011-1-15
  * @desc 部门职位管理
  */
 /**
  * @author sux
  * @time 2011-1-15
  * @desc 部门职位管理
  */
 jobInfoGrid = Ext.extend(Ext.grid.GridPanel,{
     id: 'jobGrid',
     constructor: function(){
         Ext.QuickTips.init();
         var dept = new depart("部门");
         var number = new Ext.grid.RowNumberer();
         var sm = new Ext.grid.CheckboxSelectionModel(),
         jobInfoStore = new Ext.data.JsonStore({
             url: 'job_list.action',
             root: 'root',
              totalProperty: 'totalProperty',
             //nocache: true,
             /*下面fields中利用convert获取json中嵌套的对象*/
             fields: [{name: 'department',convert: function(v){return v.deptName}},'jobId','jobName','jobBasicWage','jobRemark','operator']
         });
         jobInfoGrid.superclass.constructor.call(this,{
             width: Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
             height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
             monitorResize: true,
             doLayout: function() {
                 this.setWidth(document.body.clientWidth-205);
                 this.setHeight(document.body.clientHeight-140);
                 Ext.grid.GridPanel.prototype.doLayout.call(this);
             } ,
             viewConfig: {
                 forceFit: true
             },
             autoWidth: true,
             sm : sm,
             /*这里不需要这设置此参数autoHeight: true，在相应的JSP文件中设置了Grid的宽度和高度，加了只会画蛇添足*/
             //表格列模式的配置数组
             columns: [
                 number, sm,
             {
                 ////表头文字
                 header: '部门名称',
                 //设置列与数据集中数据记录的对应关系，值为数据记录中的字段名称
                 dataIndex: 'department',
                 align: 'center'
             },{
                 header: '职位编号',
                 dataIndex: 'jobId',
                 id: 'jobId',
                 align: 'center'
             },{
                 header: '职位名称',
                 dataIndex: 'jobName',
                 align: 'center'
             },{
                     header: '岗位工资',
                     dataIndex: 'jobBasicWage',
                     align: 'center'
             },{
                 header: '备注',
                 dataIndex: 'jobRemark',
                 ////渲染器
                 renderer: Ext.hrmsys.grid.tooltip.subLength,
                 align: 'center'
             }],
             //表格数据集对象
             store: jobInfoStore,
             //    //是否在加载数据时显示遮罩效果
             loadMask: {msg: '数据正在加载中,请稍后!'},
             //工具栏
             tbar: new Ext.Toolbar({
             style: 'padding-left: 5px;',
             items: ['部门:',dept,{
                 text: '  查询',
                 tooltip: '查询职位',
                 iconCls: 'search',
                 id: 'job_query',
                 hidden: 'true',
                 handler: this.viewJob
             },{
                 text: '删除',
                 id: 'job_delete',
                 iconCls: 'delete',
                 tooltip: '删除职位',
                 hidden: 'true',
                 handler: this.delJobFn
             },{
                 text: '添加',
                 id: 'job_add',
                 tooltip: '添加职位',
                 iconCls: 'add',
                 hidden: 'true',
                 handler: this.addJobFn
             },{
                 text: '修改',
                 tooltip: '修改职位',
                 hidden: 'true',
                 iconCls: 'update',
                 id: 'job_update',
                 handler: this.updateFn
             }]
           }),
           //分页
               bbar: new PagingToolbar(jobInfoStore, 20)
         });

         jobInfoStore.load({
             params: {
                 deptId: "",
                 start: 0,
                 limit: 20
             }
         });
     },
     viewJob: function(){
         /*Ext.get('deptValue').dom.value
           Ext.get('deptValue').getValue()
           Ext.getCmp('deptValue').getRawValue()
              以上三种可获得displayField
             下面方法为获得valueField值
         */
         var deptValue = Ext.getCmp('deptValue部门').getValue();
         //重新加载数据
         Ext.getCmp("jobGrid").getStore().load({
             params: {
                 deptId: deptValue,
                 start:    0,
                 limit: 20
             }
         });
     },
     delJobFn: function(){
         gridDel('jobGrid','jobId', 'job_delete.action');
     },
     addJobFn: function(){
         var jobAddWin = new JobAddWin();
         jobAddWin.show();
     },
     updateFn: function(){
         var jobAddWin = new JobAddWin();
         jobAddWin.title = '职位信息修改';
         var selectionModel = Ext.getCmp('jobGrid').getSelectionModel();
         var record = selectionModel.getSelections();
         if(record.length != 1){
             Ext.Msg.alert('提示','请选择一个');
             return;
         }
         var jobId = record[0].get('jobId');
         //Ext.getCmp('jobAddFormId').dept.setValue(jobId);
         Ext.getCmp('jobAddFormId').getForm().load({
             url: 'job_intoUpdate.action',
             params: {
                 jobId: jobId
             }
         })
         jobAddWin.show();
     }
 });

3.部门js

 /**
  * 创建部门的下拉框，显示出所有部门
  *
  * @param {Object}
  *            labelName
  * @memberOf {TypeName}
  */
 /**
  *  创建部门的下拉框，显示出所有部门
  * @param {Object} labelName
  * @memberOf {TypeName}
  */
 depart = Ext.extend(Ext.form.ComboBox,{
     deptStore: null,
     //注意传入参数labelName，因为其作id的一部分，避免出现相同的id
     constructor: function(labelName){
         //创建记录格式
 //        defaultRecord = Ext.data.Record.create([{name: 'deptId', type: 'string'},{name: 'deptName', type:'string'}]);
 //        var defaultData = new defaultRecord({deptId: '0', deptName: '全部'});

         deptStore = new Ext.data.JsonStore({
             url:'dept_show.action',
             autoLoad: true,
             fields: ['deptId','deptName']
 //            //监听事件在加载时加入"全部"记录
 //            listeners:{'load':function(){
 //            deptStore.insert(0,defaultData);
 //            }}
         });
         //通过 SubClass.superclass.constructor.call(this);
         //就可以直接调用父类的构造函数，这个函数的第一个参数总是 this，
         //以确保父类的构造函数在子类的作用域里工作。
         depart.superclass.constructor.call(this,{
             id: 'deptValue'+labelName,
             fieldLabel: labelName,
             displayField: 'deptName',
             valueField: 'deptId',
             hiddenName: 'deptId',
             emptyText: '全部',
             width: 100,
             store: deptStore,
             triggerAction: 'all', //显示所有
             editable: false
         })
     }
 });
 /**
  * 不带全部的dept下拉框
  * @param {Object} labelName
  * @param {Object} hiddenName
  * @memberOf {TypeName}
  */
 DepartJob = Ext.extend(Ext.form.ComboBox,{
     deptStore: null,
     //注意传入参数labelName，因为其作id的一部分，避免出现相同的id
     constructor: function(labelName, hiddenName){
         deptStore = new Ext.data.JsonStore({
             autoLoad: true, //设为自动加载，以便实现修改时选中某值
             url:'dept_show.action',
             fields: ['deptId','deptName']
         });
         DepartJob.superclass.constructor.call(this,{
             id: 'deptValue'+labelName,
             fieldLabel: labelName,
             displayField: 'deptName',
             valueField: 'deptId',
             emptyText: '请选择',
             hiddenName: hiddenName,
             width: 100,
             store: deptStore,
             triggerAction: 'all', //显示所有
             editable: false,
             allowBlank: false,
             msgTarget: 'side',
             blankText: '请选择'
         })
     }
 });

3.新建部门

 Ext.namespace("hrmsys.job.add");
 //新建一个窗口
 JobAddWin = Ext.extend(Ext.Window,{
     id:'jobAddWinId',
     addForm:null,
     constructor:function(){
         addForm = new JobAddForm();
         JobAddWin.superclass.constructor.call(this,{
             title: '职位录入',
             width: 400,
             modal: true,
             height: 300,
             collapsible: true,
             colsable: true,
             layout: 'form',
             items: [addForm]
         });
     }
 });

 //新建一个form面板
 JobAddForm = Ext.extend(Ext.form.FormPanel,{
     id: 'jobAddFormId',
     dept: null,
     constructor: function(){
         Ext.QuickTips.init();
         //加载后台数据，进行转换
         var reader = new Ext.data.JsonReader({},[{
             name: 'deptId', mapping: 'department.deptId'
         },{
             name: 'job.jobName', mapping: 'jobName'
         },{
             name: 'job.jobBasicWage', mapping: 'jobBasicWage'
         },{
             name: 'job.jobRemark', mapping: 'jobRemark'
         },{
             name: 'job.jobId', mapping: 'jobId'
         }]);
         this.dept = new depart("所在部门");
          JobAddForm.superclass.constructor.call(this, {
                 labelWidth: 80,
                 padding: '20 0 0 50',
                 // 设置表单执行load读取数据时的数据读取器
                 reader: reader,
                 labelAlign: 'right',
                 border: false,
                 frame: true,
                 items: [this.dept,{
                     xtype: 'textfield',
                     fieldLabel: '新增职位',
                     allowBlank: false,
                     msgTarget: 'side',
                     blankText: '不能为空',
                     emptyText: '不能为空',
                     width: 150,
                     name: 'job.jobName',
                     listeners: {'blur': this.jobBlurFn}
                 },{
                     xtype: 'textfield',
                     width: 150,
                     fieldLabel: '岗位工资',
                     name: 'job.jobBasicWage',
                     regex: /^[0-9]+(.[0-9]{2})?$/,
                     regexText: '只能输入数字(可两位小数)',
                     msgTarget: 'side'
                 },{
                     xtype: 'textarea',
                     fieldLabel: '备注',
                     width: 150,
                     height: 120,
                     name: 'job.jobRemark'
                 },{
                     xtype: 'hidden',//隐藏值
                     name: 'job.jobId'
                 }],
                 buttonAlign: 'center',
                 buttons: [{
                     text: '保存',
                     handler: function(){
                         if(!Ext.getCmp('jobAddFormId').getForm().isValid()){
                             return;
                         }
                         Ext.getCmp('jobAddFormId').getForm().submit({
                             url: 'job_saveOrUpdate.action',
                             method: 'post',
                             waitMsg: '正在保存数据...',
                             waitTitle: '提示',
                             scop: this,
                             success: save_success,
                             failure: save_failure
                         })
                     }
                 },{
                     text: '关闭',
                     handler: function(){
                         Ext.getCmp('jobAddWinId').destroy();
                     }
                 }]
          })
     },
     //焦点离开
     jobBlurFn:function(obj){
         Ext.Ajax.request({
             url: 'job_unique.action',
             params: {
                 jobName: obj.getValue()
             },
             success: function(response, options){
                 var data = Ext.util.JSON.decode(response.responseText);
                 if(data.msg != ""){
                     obj.markInvalid("该职位已存在!");
                 }
             },
             failure: hrmsys.util.common.failure
         });
     }
 });
 //保存成功
 save_success = function(form,action){
     Ext.Msg.confirm('提示',action.result.msg,function(button,text){
         if(button=="yes"){
             form.reset();
             //保存成功销毁窗口
             Ext.getCmp('jobAddWinId').destroy();
             Ext.getCmp('jobGrid').getStore().reload();//刷新部门显示列表
         }
     });
 }
 //保存失败
 save_failure = function(form, action){
     Ext.Msg.alert('提示',"连接失败", function(){

     });
 };

5.工具栏

 Ext.namespace("hrmsys.util.common");

 /**
  * 判断工号唯一性
  * @param {Object} empId
  */
 hrmsys.util.common.empId = function(obj){
         var empId = obj.getValue();
         var id = obj.id;
         Ext.Ajax.request({
             url: 'emp_isExist.action',
             success: function(response, options){
                 if(response.responseText != ""){
                     Ext.getCmp(id).markInvalid('此工号已存在');
                 }
             },
             failure: hrmsys.util.common.failure,
             params: {
                 empId: empId
             }
         })
     };
 hrmsys.util.common.failure = function (){
     Ext.Msg.alert('提示','连接后台失败');
 }

6.删除表格，工具栏显示

 /**
  * 删除表格中选中的内容
  * @param {Object} panelId 表单面板的Id
  * @param {Object} delId   数据库的删除时依据的属性
  * @param {Object} url  提交的URL
  * @return {TypeName}
  */

 function gridDel(panelId, delId, url){
     var oSelMode = Ext.getCmp(panelId).getSelectionModel();
     var oRecords = oSelMode.getSelections();
     var ids = "";
     for(var i=0;i<oRecords.length;i++){
         ids += oRecords[i].get(delId);
         if(i != oRecords.length-1) ids += ",";
     };
 if(ids != null && ids != ""){
         Ext.Msg.confirm("提示","确定删除",function(button, text){
             if(button == "yes"){
                 Ext.Ajax.request({
                 url: url,
                 success: function(response, options){
                             var datas = Ext.util.JSON.decode(response.responseText);
                             Ext.Msg.alert("提示", datas.msg, function(){
                                 Ext.getCmp(panelId).getStore().reload();
                             })
                         },
                 failure: function(response, options){
                             Ext.Msg.alert("提示", '连接失败', function(){})
                         },
                 params: {
                     ids: ids
                 }
                 })
             }
         })
     }else{
         Ext.Msg.alert("提示","请先选择",function(){});
     }
 };
 /**
  * 分页栏类
  * @param {Object} store 表格存储store
  * @param {Object} pageSize 页面大小
  * @memberOf {TypeName}
  */
 PagingToolbar = Ext.extend(Ext.PagingToolbar, {
     constructor: function(store, pageSize){
         PagingToolbar.superclass.constructor.call(this, {
             store: store,
             pageSize: pageSize, //页面大小
             displayInfo: true,
             displayMsg : '共<font color="red"> {2} </font>条记录,当前页记录索引<font color="red"> {0} - {1}</font>&nbsp;&nbsp;&nbsp;',
             emptyMsg: '没有数据',
             refreshText: '刷新',
             firstText: '第一页',
             prevText: '前一页',
             nextText: '下一页',
             lastText: '最后一页'
         })
     }
 })

7.

 /**
  * 根据用户权限显示不同的页面
  * 前后得到的菜单节点id和后台用户的角色id查询数据库获得用户权限
  * @param {Object} id 页面id,本质是菜单节点的id
  * @param {Object} page 按钮id前缀
  * @param {Object} cmp 组件
  * @param {Object} renderId 渲染的id
  */
 function juage(id,page,cmp, renderId){
         //设置遮罩，当按钮隐藏之后，再隐藏遮罩
          var myMask = new Ext.LoadMask('mainTab', {msg:"请稍等..."});
          myMask.show();
           Ext.Ajax.request({
               url: 'permission_permission.action',
               method: 'post',
               success: function (response, options){
                           var datas = response.responseText;
                           if(datas != ''){
                               var fn = datas.split(' ');
                               for(var i = 0; i< fn.length; i++){
                                   var comp = Ext.getCmp(page+'_'+fn[i]);
                                   if(comp){
                                       comp.show(); //将没有权限的按钮隐藏hiden
                                   }
                               }
                           }
                           cmp.render(renderId);
                           myMask.hide();
                       },
               failure: function(response, options){
                           Ext.Msg.alert('提示','连接后台失败');
               },
               params: {
                   menuId: id
               }
           })
       };