• 80.用户管理 Extjs 页面


    1

     1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
     2 <%
     3 String path = request.getContextPath();
     4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
     5 %>
     6 
     7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     8 <html>
     9   <head>
    10     <base href="<%=basePath%>">
    11     
    12     <title>角色</title>
    13     <script type="text/javascript">
    14         var userInfoPanel = new UserInfoPanel();
    15         var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
    16         juage(tabId,"user",userInfoPanel,"userDiv");
    17     </script>
    18     
    19   </head>
    20   <body>
    21       <div id="userDiv" ></div>
    22   </body>
    23 </html>

    2.

      1 /**
      2  * @author sux
      3  * @desc 用户信息
      4  */
      5 UserInfoPanel = Ext.extend(Ext.grid.EditorGridPanel,{
      6     id: 'userInfoPanelId',
      7     constructor: function(){
      8         Ext.QuickTips.init();
      9         userStore = new Ext.data.JsonStore({
     10             url: 'user_list.action',
     11             root: 'root',
     12              totalProperty: 'totalProperty',
     13             fields: ['userId','role',
     14             'employee','userName','userRemark',{name: 'userDate', mapping: 'userDate.time', dateFormat : 'time', type: 'date' }]
     15         });
     16         var rowNumber = new Ext.grid.RowNumberer(); //序列号    
     17         var checkbox = new Ext.grid.CheckboxSelectionModel(); //{默认是多选singleSelect: false}
     18         deptInfoGridPanel.superclass.constructor.call(this,{
     19              Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
     20             height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
     21             /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
     22             monitorResize: true, 
     23             doLayout: function() { 
     24                 this.setWidth(document.body.clientWidth-205);
     25                 this.setHeight(document.body.clientHeight-140);
     26                 Ext.grid.GridPanel.prototype.doLayout.call(this); 
     27             } ,
     28             viewConfig: {
     29                 forceFit: true,
     30                 columnsText : "显示/隐藏列",
     31                 sortAscText : "正序排列",
     32                 sortDescText : "倒序排列"
     33             },
     34             sm: checkbox,
     35             store: userStore,
     36             columns: [
     37                 rowNumber, checkbox,
     38                 {
     39                     header: '用户编号',
     40                     dataIndex: 'userId',
     41                     align: 'center'
     42                 },{
     43                     header: '用户名',
     44                     dataIndex: 'userName',
     45                     align: 'center'
     46                 },{
     47                     header: '员工名',
     48                     dataIndex: 'employee',
     49                     align: 'center',
     50                     renderer: function(v){
     51                         return v.empName;
     52                     }
     53                 },{
     54                     header: '角色',
     55                     dataIndex: 'role',
     56                     align: 'center',
     57                     renderer: function(v){
     58                         return v.roleName;
     59                     }
     60                 },{
     61                     header: '创建日期',
     62                     dataIndex: 'userDate',
     63                     renderer: Ext.util.Format.dateRenderer('Y-m-d'),
     64                     align: 'center'
     65                 },{
     66                     header: '备注',
     67                     dataIndex: 'userRemark',
     68                     align: 'center'
     69                 }],
     70             tbar: new Ext.Toolbar({
     71                 style: 'padding: 5px;',
     72                 id: 'userToolbar',
     73                 items: ['条目:',{
     74                     xtype: 'combo',
     75                      80,
     76                     triggerAction: 'all',
     77                     editable: false,
     78                     mode: 'local',
     79                     store: new Ext.data.SimpleStore({
     80                         fields: ['name','value'],
     81                         data: [[" "," "],["userName","用户名"],["empName","员工名"]]
     82                     }),
     83                     id: 'user_condition',
     84                     displayField: 'value',
     85                     valueField: 'name'
     86                 },'内容:',{
     87                     id: 'user_conditionValue',
     88                     xtype: 'textfield',
     89                      100
     90                 },{
     91                     text: '查询',
     92                     tooltip: '查询用户',
     93                     iconCls: 'search',
     94                     id: 'user_query',
     95                     handler: queryUserFn
     96                 },{
     97                     text: '删除',
     98                     tooltip: '删除用户',
     99                     id: 'user_delete',
    100                     iconCls: 'delete',
    101                     handler: delUserFn
    102                 },{
    103                     text: '添加',
    104                     tooltip: '添加用户',
    105                     id: 'user_add',
    106                     iconCls: 'add',
    107                     handler: userAddFn
    108                 },{
    109                     text: '修改',
    110                     id: 'user_update',
    111                     iconCls: 'update',
    112                     tooltip: '修改用户',
    113                     handler: userUpdateFn
    114                 }]
    115             }),
    116             bbar: new PagingToolbar(userStore, 20)
    117         });
    118         this.getStore().load({
    119             params: {
    120                 start: 0,
    121                 limit: 20
    122             }
    123         });
    124     }
    125 });
    126 
    127 delUserFn = function(){
    128     gridDel('userInfoPanelId','userId', 'user_delete.action');
    129 };
    130 
    131 queryUserFn = function(){
    132     var condition = Ext.getCmp('user_condition').getValue();
    133     var conditionValue = Ext.getCmp("user_conditionValue").getValue();
    134     Ext.getCmp("userInfoPanelId").getStore().reload({
    135         params: {
    136             condition: condition,
    137             conditionValue : conditionValue,
    138             start: 0,
    139             limit: 20
    140         }
    141     })
    142 };
    143 userAddFn = function(){
    144     var userAddWin = new UserAddWin("用户添加");
    145     userAddWin.show();
    146 };
    147 userUpdateFn = function(){
    148     var userUpdateWin = new UserUpdateWin("用户修改");
    149     var selectionModel = Ext.getCmp('userInfoPanelId').getSelectionModel();
    150         var record = selectionModel.getSelections();
    151         if(record.length != 1){
    152             Ext.Msg.alert('提示','请选择一个');
    153             return;
    154         }
    155         var userId = record[0].get('userId');
    156     Ext.getCmp('userUpdateFormId').getForm().load({
    157         url: 'user_intoUpdate.action',
    158         params: {
    159             userId: userId
    160         }
    161     });
    162     userUpdateWin.show();
    163 };

    3.

      1 Ext.namespace("hrmsys.user.add");
      2 
      3 UserAddWin = Ext.extend(Ext.Window,{
      4     id: 'userAddWinId',
      5     addForm: null,
      6     constructor: function(title){
      7         var addForm = new UserAddForm();
      8         UserAddWin.superclass.constructor.call(this,{
      9             title: title,
     10              400,
     11             modal: true,
     12             height: 370,
     13             resizable: false,
     14             collapsible: true,
     15             colsable: true,
     16             layout: 'form',
     17             items: [addForm]
     18         })
     19     }
     20 })
     21 UserAddForm = Ext.extend(Ext.form.FormPanel,{
     22     id: 'userAddFormId', 
     23     constructor: function(){
     24          Ext.form.Field.prototype.msgTarget = 'side';
     25         Ext.QuickTips.init();
     26         UserAddWin.superclass.constructor.call(this, {
     27             labelWidth: 80,
     28             padding: '20 0 0 50',
     29             labelAlign: 'right',
     30             border: false,
     31             frame: true,
     32             items: [{
     33                 xtype: 'textfield',
     34                  150,
     35                 fieldLabel: '员工工号',
     36                 id: 'userEmpId',
     37                 name: 'user.employee.empId',
     38                 allowBlank: false,
     39                 msgTarget: 'side',
     40                 blankText: '不能为空',
     41                 emptyText: '不能为空',
     42                 listeners: {'blur': user_blurFn}
     43             },{
     44                 xtype: 'textfield',
     45                 fieldLabel: '员工名',
     46                  150,
     47                 id: 'userEmpName',
     48                 readOnly: true
     49             },{
     50                 xtype: 'textfield',
     51                 fieldLabel: '用户名',
     52                 allowBlank: false,
     53                 msgTarget: 'side',
     54                 blankText: '不能为空',
     55                  150,
     56                 id: 'userUserName',
     57                 name: 'user.userName'
     58             },{
     59                 xtype: 'combo',
     60                 allowBlank: false,
     61                 msgTarget: 'side',
     62                 blankText: '不能为空',
     63                 fieldLabel: '角色',
     64                 store: new Ext.data.JsonStore({
     65                     url: 'role_listAll.action',
     66                     fields: ['roleId','roleName']
     67                 }),
     68                 triggerAction:"all",
     69                 editable: false,
     70                  150,
     71                 displayField: 'roleName',
     72                 valueField: 'roleId',
     73                 hiddenName: 'user.role.roleId'
     74             },{
     75                 xtype: 'textarea',
     76                 fieldLabel: '备注',
     77                  150,
     78                 height: 150,
     79                 name: 'user.userRemark'
     80             }],
     81             buttonAlign: 'center',
     82             buttons: [{
     83                 text: '保存',
     84                 handler: function(){
     85                     if(!Ext.getCmp('userAddFormId').getForm().isValid()){
     86                         return;
     87                     }
     88                     Ext.getCmp('userAddFormId').getForm().submit({
     89                         url: 'user_save.action',
     90                         method: 'post',
     91                         waitMsg: '正在保存数据...',
     92                         waitTitle: '提示',
     93                         scope: this,
     94                         success: saveUserSuccess,
     95                         failure: save_failure
     96                     })
     97                 }
     98             },{
     99                 text: '取消',
    100                 handler: function(){
    101                     Ext.getCmp('userAddFormId').getForm().reset();
    102                 }
    103             }]
    104         })
    105     }
    106 });
    107 saveUserSuccess = function(form, action){
    108     Ext.Msg.confirm('提示', action.result.msg, function(button, text){
    109         if(button == "yes"){
    110             form.reset();
    111             Ext.getCmp('userAddWinId').destroy();
    112             Ext.getCmp('userInfoPanelId').getStore().reload();//刷新部门显示列表
    113         }
    114     });
    115 };
    116 
    117 user_blurFn = function(value){
    118     var empId = value.getRawValue();
    119     Ext.Ajax.request({
    120         url: 'emp_isExist.action',
    121         method: 'post',
    122         params: {
    123             empId: empId
    124         },
    125         success: user_isExistSuccessFn,
    126         failure: save_failure
    127     })
    128 };
    129 user_isExistSuccessFn = function(response, options){
    130     if(response.responseText != ""){
    131         Ext.get('userEmpName').dom.value = response.responseText;
    132         Ext.get('userUserName').dom.value = response.responseText;
    133     }else{
    134         Ext.getCmp('userEmpId').markInvalid('此工号不存在');
    135     }
    136 };

    4.

      1 Ext.namespace("hrmsys.user.update");
      2 
      3 UserUpdateWin = Ext.extend(Ext.Window,{
      4     id: 'userUpdateWinId',
      5     addForm: null,
      6     constructor: function(title){
      7         var updateForm = new UserUpdateForm();
      8         UserUpdateWin.superclass.constructor.call(this,{
      9             title: title,
     10              400,
     11             modal: true,
     12             height: 350,
     13             collapsible: true,
     14             colsable: true,
     15             layout: 'form',
     16             items: [updateForm]
     17         })
     18     }
     19 })
     20 UserUpdateForm = Ext.extend(Ext.form.FormPanel,{
     21     id: 'userUpdateFormId', 
     22     constructor: function(){
     23          Ext.form.Field.prototype.msgTarget = 'side';
     24         Ext.QuickTips.init();
     25         //加载后台数据,进行转换
     26         var reader = new Ext.data.JsonReader({},[{
     27             name: 'user.userId'    , mapping: 'userId'
     28         },{
     29             name: 'user.employee.empId', mapping: 'employee', convert: function(v){return v.empId;}
     30         },{
     31             name: 'user.employee.empName', mapping: 'employee', convert: function(v){return v.empName;}
     32         },{
     33             name: 'user.role.roleId', mapping: 'role', convert: function(v){ return v.roleId;}
     34         },{
     35             name: 'user.userName', mapping: 'userName'
     36         },{
     37             name: 'user.userRemark', mapping: 'userRemark'
     38         }]);
     39         UserUpdateForm.superclass.constructor.call(this, {
     40             labelWidth: 80,
     41             padding: '20 0 0 50',
     42             labelAlign: 'right',
     43             border: false,
     44             frame: true,
     45             reader: reader,
     46             items: [{
     47                 xtype: 'textfield',
     48                  150,
     49                 fieldLabel: '员工工号',
     50                 id: 'empId',
     51                 readOnly: true,
     52                 name: 'user.employee.empId'
     53             },{
     54                 xtype: 'textfield',
     55                 fieldLabel: '员工名',
     56                  150,
     57                 id: 'empName',
     58                 name: 'user.employee.empName',
     59                 readOnly: true
     60             },{
     61                 xtype: 'textfield',
     62                 fieldLabel: '用户名',
     63                  150,
     64                 readOnly: true,
     65                 id: 'updateUserName',
     66                 name: 'user.userName'
     67             },{
     68                 xtype: 'combo',
     69                 fieldLabel: '角色',
     70                 store: new Ext.data.JsonStore({
     71                     url: 'role_listAll.action',
     72                     autoLoad: true,
     73                     fields: ['roleId','roleName']
     74                 }),
     75                 triggerAction:"all",
     76                 editable: false,
     77                  150,
     78                 displayField: 'roleName',
     79                 valueField: 'roleId',
     80                 hiddenName: 'user.role.roleId'
     81             },{
     82                 xtype: 'textarea',
     83                 fieldLabel: '备注',
     84                  150,
     85                 height: 150,
     86                 name: 'user.userRemark'
     87             },{
     88                 xtype: 'hidden',
     89                 name: 'user.userId'
     90             }],
     91             buttonAlign: 'center',
     92             buttons: [{
     93                 text: '保存',
     94                 handler: function(){
     95                     if(!Ext.getCmp('userUpdateFormId').getForm().isValid()){
     96                         return;
     97                     }
     98                     Ext.getCmp('userUpdateFormId').getForm().submit({
     99                         url: 'user_updateRole.action',
    100                         method: 'post',
    101                         waitMsg: '正在保存数据...',
    102                         waitTitle: '提示',
    103                         scope: this,
    104                         success: updateUserSuccess,
    105                         failure: save_failure
    106                     })
    107                 }
    108             },{
    109                 text: '关闭',
    110                 handler: function(){
    111                     Ext.getCmp('userUpdateWinId').destroy();
    112                 }
    113             }]
    114         })
    115     }
    116 });
    117 updateUserSuccess = function(form, action){
    118     Ext.Msg.confirm('提示', action.result.msg, function(button, text){
    119         if(button == "yes"){
    120             form.reset();
    121             Ext.getCmp('userUpdateWinId').destroy();
    122             Ext.getCmp('userInfoPanelId').getStore().reload();//刷新部门显示列表
    123         }
    124     });
    125 };
  • 相关阅读:
    f(n)=1-1/2+1/3-1/4...+1/n
    练习2-15 求简单交错序列前N项和 (15 分)
    练习2-14 求奇数分之一序列前N项和 (15 分)
    练习2-13 求N分之一序列前N项和 (15 分)
    练习2-12 输出华氏-摄氏温度转换表 (15 分)
    【转载】如何从零开始开发一款嵌入式产品(20年的嵌入式经验分享学习,来自STM32神舟系列开发板设计师的总结
    【转载-Andrew_qian】stm32中断学习
    【转-Andrew_qian】stm32中断嵌套全攻略
    【转】写给自学者的入门指南
    【转】作为一个程序员,数学对你到底有多重要
  • 原文地址:https://www.cnblogs.com/sharpest/p/7662045.html
Copyright © 2020-2023  润新知