80.用户管理 Extjs 页面

 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>

  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 };

  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 };

  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 };

相关阅读:
[TCP/IP]TCP的三次握手和四次挥手
 梦
 思考
 jQuery完整的事件委托(on())
jQuery队列动画
 jQuery自定义动画
 jQuery淡入淡出
 jQuery滑动动画
 jQuery基本动画
 jQuery基础3
原文地址：https://www.cnblogs.com/sharpest/p/7662045.html