• 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     };
  • 相关阅读:
    jsp>EL表达式语言 小强斋
    jsp>JSP + Servlet + JavaBean开发模式 小强斋
    jsp>Smartupload例子代码 小强斋
    jsp>servlet 小强斋
    jsp>JSP + Servlet + JavaBean开发模式 小强斋
    五言诗
    夜深灯下行
    2011 年数据库大会的PPT下载
    去除iPhone icon的光晕效果
    望苍天
  • 原文地址:https://www.cnblogs.com/sharpest/p/7660341.html
Copyright © 2020-2023  润新知