76.培训记录信息 Extjs 页面

1.培训记录信息页面jsp

 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     
14     <script type="text/javascript">
15         var trainRecordPanel = new TrainRecordPanel();
16         var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
17         juage(tabId,"trainr",trainRecordPanel,"trainRecord");
18     </script>
19     
20   </head>
21   <body>
22       <div id="trainRecord" ></div>
23   </body>
24 </html>

2.培训记录页面js

 1 TrainRecordPanel = Ext.extend(Ext.Panel,{
 2     id: 'trainRecordPanelId',
 3     constructor: function(){
 4         tRecordQueryPanel = new TRecordQueryPanel();
 5         tRecordInfoGridPanel = new TRecordInfoGridPanel();
 6         TrainRecordPanel.superclass.constructor.call(this,{
 7             style: 'margin:0 auto',
 8             border: false,
 9             //layout: 'fit',
10             //autoWidth: true,
11             //autorHeight: true,
12             items: [tRecordQueryPanel, tRecordInfoGridPanel]
13         })
14     }
15 })

3.

  1 Ext.namespace("hrmsys.trainRecord.info");
  2 /**
  3  * 培训记录信息表格
  4  * @author sux 2011-02-19
  5  * @memberOf {TypeName} 
  6  * @return {TypeName} 
  7  */
  8 TRecordInfoGridPanel = Ext.extend(Ext.grid.GridPanel,{
  9     id: 'tRecordInfoGridId',
 10     constructor: function(){
 11         Ext.QuickTips.init();
 12         var sm = new Ext.grid.CheckboxSelectionModel();
 13         var number = new Ext.grid.RowNumberer();
 14         var cm = new Ext.grid.ColumnModel([
 15             number, sm,
 16         {
 17             header: '编号',
 18             dataIndex: 'tRecordId',
 19             align: 'center'
 20         },{
 21             header: '培训对象',
 22             dataIndex: 'empName',
 23             align: 'center'
 24         },{
 25             header: '培训人',
 26             dataIndex: 'trainPerson',
 27             align: 'center'
 28         },{
 29             header: '培训时间',
 30             dataIndex: 'trainDate',
 31             align: 'center'
 32         },{
 33             header: '培训主题',
 34             dataIndex: 'trainTitle',
 35             align: 'center'
 36         },{
 37             header: '培训地点',
 38             dataIndex: 'trainPlace',
 39             align: 'center'
 40         },{
 41             header: '结果',
 42             dataIndex: 'trainResult',
 43             align: 'center',
 44             renderer: function(value){
 45                 if(value == 0){
 46                     return "未参加";
 47                 }else if( value == 1){
 48                     return "优秀";
 49                 }else if( value == 2){
 50                     return "良好";
 51                 }else if( value == 3){
 52                     return "及格";
 53                 }else if( value == 4){
 54                     return "不及格";
 55                 }
 56             }
 57         }]);
 58         var trainStore = new Ext.data.JsonStore({
 59             url: 'tRecord_list.action',
 60             root: 'root',
 61              totalProperty: 'totalProperty',
 62             fields: ['tRecordId','empName','trainPerson','trainDate','trainTitle','trainPlace','trainResult']
 63         });
 64         TRecordInfoGridPanel.superclass.constructor.call(this, {
 65              Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
 66             height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
 67             /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
 68             monitorResize: true, 
 69             doLayout: function() { 
 70                 this.setWidth(document.body.clientWidth-205);
 71                 this.setHeight(document.body.clientHeight-250);
 72                 Ext.grid.GridPanel.prototype.doLayout.call(this); 
 73             } ,
 74             viewConfig: {
 75                 forceFit: true,
 76                 autoFill: true,
 77                 columnsText : "显示/隐藏列",
 78                 sortAscText : "正序排列",
 79                 sortDescText : "倒序排列"
 80             },
 81             border: false,
 82             height: 500,
 83             frame: true,
 84             cm: cm,
 85             sm: sm,
 86             store: trainStore,
 87             tbar: new Ext.Toolbar({
 88                 items: [{
 89                     text: '显示全部',
 90                     iconCls: 'all',
 91                     handler: function(){
 92                         trainStore.load();
 93                     }
 94                 },{
 95                     text: '删除',
 96                     iconCls: 'delete',
 97                     id: 'trainr_delete',
 98                     handler: delTRecordFn
 99                 },{
100                     text: '添加',
101                     iconCls: 'add',
102                     id: 'trainr_add',
103                     handler: addTRecordFn
104                 },{
105                     text: '修改',
106                     iconCls: 'update',
107                     id: 'trainr_update',
108                     handler: updateTRecordFn
109                 },{
110                     text: '详情',
111                     iconCls: 'detail',
112                     id: 'trainr_detail',
113                     handler: detailTRecordFn
114                 }]
115             }),
116             bbar: new PagingToolbar(trainStore,20)
117         });
118         trainStore.load({
119             params: {
120                 start: 0,
121                 limit: 20
122             }
123         });
124     }
125 });
126 delTRecordFn = function(){
127     gridDel('tRecordInfoGridId','tRecordId','tRecord_delete.action');
128 };
129 addTRecordFn = function(){
130     var trainRecordAddWin = new TrainRecordAddWin()
131     trainRecordAddWin.show();
132 }
133 
134 /**
135  * 培训记录查询面板
136  * @memberOf {TypeName} 
137  * @author sux 2011-02-19
138  */
139 var TRecordQueryPanel = Ext.extend(Ext.Panel,{
140     id: 'tRecordQueryId',
141     constructor: function(){
142         TRecordQueryPanel.superclass.constructor.call(this,{
143             collapsible: true,
144             titleCollapse: true, //单击整个collapse都有效
145             //collapsed: true, //渲染后即闭合
146             title: '条件查询',
147             border: false,
148             frame: true,
149             autoWidth: true,
150             defaultType: 'fieldset',
151             items: [{
152                 title: '条件',
153                 layout: 'table',
154                 layoutConfig: {
155                     columns: 7
156                 },
157                 defaults: {
158                     labelWidth: 60,
159                     labelAlign: 'right'
160                 },
161                 items: [{
162                     layout: 'form',
163                     items: [{
164                         xtype: 'textfield',
165                         fieldLabel: '培训对象',
166                         id: 'empName',
167                          100
168                     }]
169                 },{
170                     layout: 'form',
171                     items: [{
172                         xtype: 'textfield',
173                         fieldLabel: '培训人',
174                          100,
175                         id: 'trainPerson'
176                     }]
177                 },{
178                     layout: 'form',
179                     items: [{
180                         xtype: 'textfield',
181                         fieldLabel: '培训主题',
182                          100,
183                         id: 'trainTitle'
184                     }]
185                 },{
186                     layout: 'form',
187                     items: [{
188                         xtype: 'datefield',
189                         fieldLabel: '开始时间',
190                         format: 'Y-m-d',
191                          100,
192                         id: 'startDate'
193                     }]
194                 },{
195                     layout: 'form',
196                     items: [{
197                         xtype: 'datefield',
198                         fieldLabel: '结束时间',
199                         format: 'Y-m-d',
200                          100,
201                         id: 'endDate'
202                     }]
203                 },{
204                     style: 'margin: 0px 10px 0px 20px;',
205                     xtype: 'button',
206                     text: '查询',
207                     iconCls: 'search',
208                     handler: queryTRecordFn
209                 },{
210                     xtype: 'button',
211                     text: '取消',
212                     iconCls: 'cancel',
213                     handler: cancelTRecordFn
214                 }]
215             }]
216         })
217     }
218 });
219 queryTRecordFn = function(){
220     var empName = Ext.get("empName").dom.value;
221     var trainPerson = Ext.get("trainPerson").dom.value;
222     var trainTitle = Ext.get("trainTitle").dom.value;
223     var startDate = Ext.get("startDate").dom.value;
224     var endDate = Ext.get("endDate").dom.value;
225     Ext.getCmp('tRecordInfoGridId').getStore().load({
226         params: {
227             type: 'query',
228             empName: empName,
229             startDate: startDate,
230             endDate: endDate,
231             trainTitle: trainTitle,
232             trainPerson: trainPerson,
233             start: 0,
234             limit: 20
235         }
236     })
237 };
238 cancelTRecordFn = function(){
239     Ext.get("empName").dom.value = "";
240     Ext.get("trainPerson").dom.value = "";
241     Ext.get("trainTitle").dom.value = "";
242     Ext.get("startDate").dom.value = "";
243     Ext.get("endDate").dom.value = "";
244 };
245 updateTRecordFn = function(){
246     var trainRecordAddWin = new TrainRecordAddWin()
247     trainRecordAddWin.title = '培训记录修改';
248         var selectionModel = Ext.getCmp('tRecordInfoGridId').getSelectionModel();
249         var record = selectionModel.getSelections();
250         if(record.length != 1){
251             Ext.Msg.alert('提示','请选择一个');
252             return;
253         }
254         var tRecordId = record[0].get('tRecordId');
255         Ext.getCmp('tRecordAddPanelId').getForm().load({
256             url: 'tRecord_edit.action',
257             params: {
258                 trainRecordId: tRecordId
259             }
260         })
261     trainRecordAddWin.show();
262 };
263 detailTRecordFn = function(){
264     var trainRecordDetailWin = new TrainRecordDetailWin()
265         var selectionModel = Ext.getCmp('tRecordInfoGridId').getSelectionModel();
266         var record = selectionModel.getSelections();
267         if(record.length != 1){
268             Ext.Msg.alert('提示','请选择一个');
269             return;
270         }
271         var tRecordId = record[0].get('tRecordId');
272         Ext.getCmp('tRecordDetailPanelId').getForm().load({
273             url: 'tRecord_edit.action',
274             params: {
275                 trainRecordId: tRecordId
276             }
277         })
278     trainRecordDetailWin.show();
279 };

5.培训信息添加窗口

  1 TrainRecordAddWin = Ext.extend(Ext.Window,{
  2     id: 'tRecordAddWinId',
  3     constructor: function(){
  4         var trainRecordAddPanel = new TrainRecordAddPanel();
  5         TrainRecordAddWin.superclass.constructor.call(this, {
  6              500,
  7             height: 300,
  8             resizable: false, //不能改变窗体大小 
  9             title: '培训记录信息录入',
 10             collapsible: true,
 11             modal: true,
 12             items: [trainRecordAddPanel]
 13         })
 14     }
 15 })
 16 
 17 TrainRecordAddPanel = Ext.extend(Ext.form.FormPanel,{
 18     id: 'tRecordAddPanelId',
 19     constructor: function(){
 20         Ext.QuickTips.init();
 21         var reader = new Ext.data.JsonReader({},[{
 22             name: 'trainRecord.trecordId', mapping: 'trecordId'
 23         },{
 24             name: 'title', mapping: 'train.trainTitle'
 25         },{
 26             name: 'trainRecord.train.trainId', mapping: 'train.trainId'
 27         },{
 28             name: 'trainRecord.employee.empId', mapping: 'employee.empId'
 29         },{
 30             name: 'trainRecord.trecordResult', mapping: 'trecordResult'
 31         },{
 32             name: 'trainRecord.trecordRemark', mapping: 'trecordRemark'
 33         }]);
 34         TrainRecordAddPanel.superclass.constructor.call(this,{
 35              520,
 36             border: false,
 37             height: 270,
 38             frame: true,
 39             reader: reader,
 40             defaults: {
 41                 labelWidth: 60,
 42                 labelAlign: 'right'
 43             },
 44             items:[{
 45                 layout: 'form',
 46                 items: [{
 47                     xtype: 'hidden',
 48                     name: 'trainRecord.trecordId'
 49                 },{
 50                     xtype: 'textfield',
 51                     fieldLabel: '培训主题',
 52                      150,
 53                     allowBlank: false,
 54                     msgTarget: 'side',
 55                     blankText: '不能为空',
 56                     name: 'title',
 57                     id: 'title',
 58                     listeners: {'focus': function(){
 59                             var trainGridWin = new TrainGridWin();
 60                             trainGridWin.show();
 61                         }
 62                     }
 63                 },{
 64                     xtype: 'textfield',
 65                     fieldLabel: '工号',
 66                     allowBlank: false,
 67                     msgTarget: 'side',
 68                     blankText: '不能为空',
 69                      150,
 70                     name: 'trainRecord.employee.empId'
 71                 },{
 72                     xtype: 'combo',
 73                     fieldLabel: '培训结果',
 74                      150,
 75                     allowBlank: false,
 76                     msgTarget: 'side',
 77                     blankText: '不能为空',
 78                     triggerAction: 'all',
 79                     editable: false,
 80                     mode: 'local',
 81                     store: new Ext.data.SimpleStore({
 82                         fields: ['name','value'],
 83                         data: [["未参加","0"],["优秀","1"],["良好","2"],["及格","3"],["不及格","4"]]
 84                     }),
 85                     displayField: 'name',
 86                     valueField: 'value',
 87                     hiddenName: 'trainRecord.trecordResult'
 88                 },{
 89                 layout: 'form',
 90                 items: [{
 91                     xtype: 'textarea',
 92                     fieldLabel: '备注',
 93                      370,
 94                     height: 100,
 95                     name: 'trainRecord.trecordRemark'
 96                 },{
 97                     xtype: 'hidden',
 98                     name: 'trainRecord.train.trainId',
 99                     id: 'trainId'
100                 }]
101             }]
102             }],
103             buttonAlign: 'center',
104             buttons: [{
105                 columnWidth: .5,
106                 text: '保存',
107                 iconCls: 'save',
108                 handler: this.saveTRecordFn
109             },{
110                 columnWidth: .5,
111                 text: '关闭',
112                 iconCls: 'cancel',
113                 handler: this.cancelTRecordFn
114             }]
115         })
116     },
117     saveTRecordFn : function(){
118         if(!Ext.getCmp('tRecordAddPanelId').getForm().isValid()){
119             return;
120         }
121         Ext.getCmp('tRecordAddPanelId').getForm().submit({
122             url: 'tRecord_save.action',
123             method: 'post',
124             waitTitle: '提示',
125             waitMsg: '正在保存数据...',
126             success: saveTRecordSuccessFn,
127             failure: saveTRecordFailureFn
128         })},
129     cancelTRecordFn : function(){
130         Ext.getCmp('tRecordAddWinId').destroy();
131     }
132 });
133     saveTRecordSuccessFn = function(form, action){
134         Ext.Msg.confirm('提示',action.result.msg, function(button, text){
135             if(button == "yes"){
136                 form.reset();
137                 Ext.getCmp('tRecordAddWinId').destroy();
138                 Ext.getCmp('tRecordInfoGridId').getStore().reload();
139             }
140         })
141     };
142     saveTRecordFailureFn = function(form, action){
143         Ext.Msg.alert('提示','连接失败', function(button, text){});
144     };
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sharpest/p/7660341.html