53. 部门信息显示 EXTJS 单击树节点

1.

 /**
  * @author sux
  * @time 2011-1-14
  * @desc 部门信息显示
  */
 deptInfoGridPanel = Ext.extend(Ext.grid.EditorGridPanel,{
     id: 'deptInfoPanel',
     //renderTo: Ext.getBody(), //渲染到body
     constructor: function(){
         Ext.QuickTips.init();
         this['store'] = new Ext.data.JsonStore({
             url: 'dept_list.action',
             root: 'root',
              totalProperty: 'totalProperty',
             //record
             fields: ['deptId','deptName',
             'deptNum','deptMgr','deptRemark']
         });
         var rowNumber = new Ext.grid.RowNumberer(); //序列号
         var checkbox = new Ext.grid.CheckboxSelectionModel(); //{默认是多选singleSelect: false}
         deptInfoGridPanel.superclass.constructor.call(this,{
             width: Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
             height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
             /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
             monitorResize: true,
             doLayout: function() {
                 this.setWidth(document.body.clientWidth-);
                 this.setHeight(document.body.clientHeight-);
                 Ext.grid.GridPanel.prototype.doLayout.call(this);
             } ,
             /**end**/
             viewConfig: {
                 forceFit: true,
                 columnsText : "显示/隐藏列",
                 sortAscText : "正序排列",
                 sortDescText : "倒序排列"
             },
             sm: checkbox,
             columns: [
                 rowNumber, checkbox,
                 {
                     header: '部门编号',
                     dataIndex: 'deptId',
                     align: 'center'
                 },{
                     header: '部门名称',
                     dataIndex: 'deptName',
                     align: 'center'
                 },{
                     header: '部门人数',
                     dataIndex: 'deptNum',
                     align: 'center'
                 },{
                     header: '部门经理',
                     dataIndex: 'deptMgr',
                     align: 'center'
                 },{
                     header: '备注',
                     dataIndex: 'deptRemark',
                     name: 'deptRemark',
                     renderer: Ext.hrmsys.grid.tooltip.subLength,
                     align: 'center'
                 }],
             tbar: new Ext.Toolbar({
                 style: 'padding: 5px;',
                 id: 'departToolbar',
                 items: ['条目:',{
                     xtype: 'combo',
                     width: ,
                     triggerAction: 'all',
                     editable: false,
                     mode: 'local',
                     store: new Ext.data.SimpleStore({
                         fields: ['name','value'],
                         data: [[" ","全部"],["deptId","部门编号"],["deptName","部门名称"],["deptMgr","部门经理"]]
                     }),
                     id: 'condition_dept',
                     displayField: 'value',
                     valueField: 'name',
                     emptyText: '请选择'
                 },'内容:',{
                     id: 'condition_dept_value',
                     xtype: 'textfield',
                     listeners : {
                         specialkey : function(field, e) {//添加回车事件
                             if (e.getKey() == Ext.EventObject.ENTER) {
                                queryDeptFn();
                             }
                         }
                     }
                 },{
                     text: '查询',
                     tooltip: '查询部门',
                     iconCls: 'search',
                     hidden: 'true',
                     id: 'dept_query',
                     handler: queryDeptFn
                 },{
                     text: '删除',
                     tooltip: '删除部门',
                     id: 'dept_delete',
                     iconCls: 'delete',
                     hidden: 'true',
                     handler: delDeptFn
                 },{
                     text: '添加',
                     tooltip: '添加部门',
                     id: 'dept_add',
                     hidden: 'true',
                     iconCls: 'add',
                     handler: addDeptFn
                 },{
                     text: '修改',
                     id: 'dept_update',
                     iconCls: 'update',
                     hidden: 'true',
                     tooltip: '修改部门',
                     handler: updateDeptFn
                 }]
             }),
             bbar: new PagingToolbar(this['store'], )
         });
         this.getStore().load({
             params:{
                 start: ,
                 limit:
             }
         });
         //new Ext.Viewport().render();
     }
 });

 addDeptFn = function(){
     deptAddWin = new DeptAddWin();
     deptAddWin.show();
 };

 delDeptFn = function(){
     gridDel('deptInfoPanel','deptId', 'dept_delete.action');
 };

 updateDeptFn = function(){
     deptAddWin = new DeptAddWin();
     deptAddWin.title = '部门信息修改';
     var selectionModel = Ext.getCmp('deptInfoPanel').getSelectionModel();
     var record = selectionModel.getSelections();
     if(record.length != ){
         Ext.Msg.alert('提示','请选择一个');
         return;
     }
     var deptId = record[].get('deptId');
     Ext.getCmp('deptAddFormId').getForm().load({
         url: 'dept_intoUpdate.action',
         params: {
             deptId: deptId
         }
     })
     deptAddWin.show();
 };

 queryDeptFn = function(){
     var condition = Ext.getCmp('condition_dept').getValue();
     var conditionValue = Ext.getCmp("condition_dept_value").getValue();
     Ext.getCmp("deptInfoPanel").getStore().reload({
         params: {
             condition: condition,
             conditionValue : conditionValue,
             start: ,
             limit:
         }
     })
 };

2.添加一个新的部门窗口

 Ext.namespace("hrmsys.dept.add");
 //新建一个window窗口
 DeptAddWin = Ext.extend(Ext.Window,{
     id: 'deptAddWinId',
     addForm: null,
     constructor: function(){
         addForm = new DeptAddForm();
         DeptAddWin.superclass.constructor.call(this,{
             title: '部门录入',
             width: 400,
             modal: true,
             height: 350,
             collapsible: true,
             colsable: true,
             layout: 'form',
             items: [addForm]
         })
     }
 })
 //窗口里包含一个Form面板
 DeptAddForm = Ext.extend(Ext.form.FormPanel,{
     id: 'deptAddFormId',
     constructor: function(){
         Ext.QuickTips.init();
         //加载后台数据，进行转换
         var reader = new Ext.data.JsonReader({},[{
             name: 'dept.deptId'    , mapping: 'deptId'
         },{
             name: 'dept.deptName', mapping: 'deptName'
         },{
             name: 'dept.deptMgr', mapping: 'deptMgr'
         },{
             name: 'dept.deptRemark', mapping: 'deptRemark'
         }]);
         DeptAddWin.superclass.constructor.call(this, {
             labelWidth: 80,
             padding: '20 0 0 50',
             reader: reader,
             labelAlign: 'right',
             border: false,
             frame: true,
             items: [{
                 xtype: 'textfield',
                 fieldLabel: '部门编号',
                 allowBlank: false,
                 msgTarget: 'side',
                 blankText: '不能为空',
                 emptyText: '不能为空',
                 width: 150,
                 name: 'dept.deptId'
             },{
                 xtype: 'textfield',
                 fieldLabel: '部门名称',
                 allowBlank: false,
                 msgTarget: 'side',
                 blankText: '不能为空',
                 emptyText: '不能为空',
                 width: 150,
                 name: 'dept.deptName'
             },{
                 xtype: 'textfield',
                 width: 150,
                 fieldLabel: '部门经理工号',
                 id: 'empId',
                 msgTarget: 'side',
                 listeners: {'blur': blurFn}
             },{
                 xtype: 'textfield',
                 fieldLabel: '部门经理姓名',
                 width: 150,
                 id: 'empName',
                 name: 'dept.deptMgr',
                 readOnly: true
             },{
                 xtype: 'textarea',
                 fieldLabel: '备注',
                 width: 150,
                 height: 150,
                 name: 'dept.deptRemark'
             }],
             buttonAlign: 'center',
             buttons: [{
                 text: '保存',
                 handler: function(){
                     //验证表单填写的数据是否有效
                     if(!Ext.getCmp('deptAddFormId').getForm().isValid()){
                         return;
                     }
                     //提交表单
                     Ext.getCmp('deptAddFormId').getForm().submit({
                         url: 'dept_save.action',
                         method: 'post',
                         waitMsg: '正在保存数据...',
                         waitTitle: '提示',
                         scope: this,
                         success: saveDeptSuccessFn,
                         failure: save_failure
                     })
                 }
             },{
                 text: '关闭',
                 handler: function(){
                     Ext.getCmp('deptAddWinId').destroy();
                 }
             }]
         })
     }
 });

 //提交表单成功处理函数
 saveDeptSuccessFn = function(form, action){
     //消息提示框
     Ext.Msg.confirm('提示', action.result.msg, function(button, text){
         if(button == "yes"){
             form.reset();
             //销毁面板
             Ext.getCmp('deptAddWinId').destroy();
             //reload()重新加载数据时
             Ext.getCmp('deptInfoPanel').getStore().reload();//刷新部门显示列表
         }
     });
 };

 //提交失败处理函数
 save_failure = function(form, action){
     Ext.Msg.alert('提示',"连接失败", function(){

     });
 };
 //工号失焦点事件
 blurFn = function(value){
     var empId = value.getRawValue();
     Ext.Ajax.request({
         url: 'emp_isExist.action',
         method: 'post',
         params: {
             empId: empId
         },
         success: isExistSuccessFn,
         failure: save_failure
     })
 };
 isExistSuccessFn = function(response, options){
     if(response.responseText != "")
         Ext.get('empName').dom.value = response.responseText;
     else{
　　　　　　　////成批设置表单字段为验证无效
         Ext.getCmp('empId').markInvalid('此工号不存在');
     }
 };

3.删除部门

 /**
  * 删除表格中选中的内容
  * @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: '最后一页'
         })
     }
 })

4.部门信息jsp页面

 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <script type="text/javascript">
     var deptPanel = new deptInfoGridPanel();
     var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
     juage(tabId,"dept",deptPanel,"tab");
     //deptPanel.render("tab");
 </script>
 <div id="tab" ></div>

5.

 /**
  * 根据用户权限显示不同的页面
  * 前后得到的菜单节点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
                                   }
                               }
                           }
                           //1.调用组件的render方法
                           //renderer可以格式化该列显示的数据格式或者按照你自定义的脚本显示最终数据样子，个人是这么理解，如果你不是可以看下本文
                           cmp.render(renderId);
                           myMask.hide();
                       },
               failure: function(response, options){
                           Ext.Msg.alert('提示','连接后台失败');
               },
               params: {
                   menuId: id
               }
           })
       };