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 8 9 1011 12 培训信息 13 18 19 20 21 22 23
2.train.js 页面布局面板
1 TrainPanel = Ext.extend(Ext.Panel,{ 2 id: 'trainPanelId', 3 constructor: function(){ 4 trainQueryPanel = new TrainQueryPanel(); 5 trainInfoGridPanel = new TrainInfoGridPanel(); 6 TrainPanel.superclass.constructor.call(this,{ 7 style: 'margin:0 auto', 8 border: false, 9 //layout: 'fit',10 //autoWidth: true,11 //autorHeight: true,12 //定义两个面板13 items: [trainQueryPanel, trainInfoGridPanel]14 })15 }16 })
3.trainInfo.js 编辑表格面板和查询面板
1 /** 2 * 培训信息表格 3 * @author sux 2011-02-20 4 * @memberOf {TypeName} 5 */ 6 TrainInfoGridPanel = Ext.extend(Ext.grid.GridPanel,{ 7 id: 'trainInfoGridId', 8 constructor: function(){ 9 Ext.QuickTips.init(); 10 var sm = new Ext.grid.CheckboxSelectionModel(); 11 var number = new Ext.grid.RowNumberer(); 12 13 var cm = new Ext.grid.ColumnModel([ 14 number, sm, 15 { 16 header: '编号', 17 dataIndex: 'trainId', 18 align: 'center' 19 },{ 20 header: '培训人', 21 dataIndex: 'trainPerson', 22 align: 'center' 23 },{ 24 header: '培训时间', 25 dataIndex: 'trainDate', 26 align: 'center' 27 },{ 28 header: '培训主题', 29 dataIndex: 'trainTitle', 30 align: 'center' 31 },{ 32 header: '培训地点', 33 dataIndex: 'trainPlace', 34 align: 'center' 35 }]); 36 37 var trainStore = new Ext.data.JsonStore({ 38 url: 'train_list.action', 39 root: 'root', 40 totalProperty: 'totalProperty', 41 fields: ['trainId','trainPerson','trainDate','trainTitle','trainPlace'] 42 }); 43 44 TrainInfoGridPanel.superclass.constructor.call(this, { 45 width: Ext.getCmp('mainTab').getActiveTab().getInnerWidth(), 46 height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(), 47 /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/ 48 monitorResize: true, 49 doLayout: function() { 50 this.setWidth(document.body.clientWidth-205); 51 this.setHeight(document.body.clientHeight-250); 52 Ext.grid.GridPanel.prototype.doLayout.call(this); 53 } , 54 viewConfig: { 55 forceFit: true, 56 autoFill: true, 57 columnsText : "显示/隐藏列", 58 sortAscText : "正序排列", 59 sortDescText : "倒序排列" 60 }, 61 border: false, 62 height: 500, 63 frame: true, 64 cm: cm, 65 sm: sm, 66 store: trainStore, 67 tbar: new Ext.Toolbar({ 68 items: [{ 69 text: '显示全部', 70 iconCls: 'all', 71 handler: function(){ 72 trainStore.load(); 73 } 74 },{ 75 text: '删除', 76 iconCls: 'delete', 77 id: 'train_delete', 78 handler: delTrainFn 79 },{ 80 text: '添加', 81 iconCls: 'add', 82 id: 'train_add', 83 handler: addTrainFn 84 },{ 85 text: '修改', 86 iconCls: 'update', 87 id: 'train_update', 88 handler: editTrainFn 89 },{ 90 text: '详情', 91 iconCls: 'detail', 92 id: 'train_detail', 93 handler: detailTrainFn 94 }] 95 }), 96 bbar: new PagingToolbar(trainStore,20) 97 }); 98 trainStore.load({ 99 params: {100 start: 0,101 limit: 20102 }103 });104 }105 });106 //删除107 delTrainFn = function(){108 gridDel('trainInfoGridId','trainId','train_delete.action');109 };110 //添加111 addTrainFn = function(){112 var trainAddWin = new TrainAddWin();113 trainAddWin.show();114 };115 //详情116 detailTrainFn = function(){117 var trainDetailWin = new TrainDetailWin();118 trainDetailWin.title = '招聘信息';119 var selectionModel = Ext.getCmp('trainInfoGridId').getSelectionModel();120 var record = selectionModel.getSelections();121 if(record.length != 1){122 Ext.Msg.alert('提示','请选择一个');123 return;124 }125 var trainId = record[0].get('trainId');126 Ext.getCmp('trainDetailPanelId').getForm().load({127 url: 'train_intoUpdate.action',128 params: {129 trainId: trainId130 }131 })132 trainDetailWin.show();133 };134 //修改135 editTrainFn = function(){136 var trainAddWin = new TrainAddWin();137 trainAddWin.title = '招聘信息修改';138 var selectionModel = Ext.getCmp('trainInfoGridId').getSelectionModel();139 var record = selectionModel.getSelections();140 if(record.length != 1){141 Ext.Msg.alert('提示','请选择一个');142 return;143 }144 var trainId = record[0].get('trainId');145 Ext.getCmp('trainAddPanelId').getForm().load({146 url: 'train_intoUpdate.action',147 params: {148 trainId: trainId149 }150 })151 trainAddWin.show();152 };153 154 /**155 * 按条件查询面板156 * @author sux 2011-02-20157 * @memberOf {TypeName} 158 */159 var TrainQueryPanel = Ext.extend(Ext.Panel,{160 id: 'trainQueryId',161 constructor: function(){162 TrainQueryPanel.superclass.constructor.call(this,{163 collapsible: true,164 titleCollapse: true, //单击整个collapse都有效165 //collapsed: true, //渲染后即闭合166 title: '条件查询',167 border: false,168 frame: true,169 autoWidth: true,170 defaultType: 'fieldset',171 items: [{172 title: '条件',173 layout: 'table',174 layoutConfig: {175 columns: 6176 },177 defaults: {178 labelWidth: 60,179 labelAlign: 'right'180 },181 items: [{182 layout: 'form',183 items: [{184 xtype: 'textfield',185 fieldLabel: '培训人',186 width: 100,187 id: 'train_person'188 }]189 },{190 layout: 'form',191 items: [{192 xtype: 'textfield',193 fieldLabel: '培训主题',194 width: 100,195 id: 'train_title'196 }]197 },{198 layout: 'form',199 items: [{200 xtype: 'datefield',201 fieldLabel: '开始时间',202 format: 'Y-m-d',203 width: 100,204 id: 'start_date'205 }]206 },{207 layout: 'form',208 items: [{209 xtype: 'datefield',210 fieldLabel: '结束时间',211 format: 'Y-m-d',212 width: 100,213 id: 'end_date'214 }]215 },{216 style: 'margin: 0px 10px 0px 20px;',217 xtype: 'button',218 text: '查询',219 iconCls: 'search',220 handler: queryTrainFn221 },{222 xtype: 'button',223 text: '取消',224 iconCls:'cancel',225 handler: cancelTrainFn226 }]227 }]228 })229 }230 });231 //查询232 queryTrainFn = function(){233 var trainPerson = Ext.get("train_person").dom.value;234 var trainTitle = Ext.get("train_title").dom.value;235 var startDate = Ext.get("start_date").dom.value;236 var endDate = Ext.get("end_date").dom.value;237 Ext.getCmp('trainInfoGridId').getStore().load({238 params: {239 type: 'query',240 startDate: startDate,241 endDate: endDate,242 trainTitle: trainTitle,243 trainPerson: trainPerson,244 start: 0,245 limit: 20246 }247 })248 };249 //取消250 cancelTrainFn = function(){251 Ext.get("train_person").dom.value = "";252 Ext.get("train_title").dom.value = "";253 Ext.get("start_date").dom.value = "";254 Ext.get("end_date").dom.value = "";255 };
4. 添加窗口
1 //新一个培训信息发布窗口 2 TrainAddWin = Ext.extend(Ext.Window,{ 3 id: 'trainAddWinId', 4 constructor: function(){ 5 var trainAddPanel = new TrainAddPanel(); 6 TrainAddWin.superclass.constructor.call(this, { 7 width: 460, 8 height: 350, 9 resizable: false, //不能改变窗体大小 10 title: '培训信息录入', 11 collapsible: true, 12 modal: true, 13 items: [trainAddPanel] 14 }) 15 } 16 }) 17 18 //培训信息发布面板 19 TrainAddPanel = Ext.extend(Ext.form.FormPanel,{ 20 id: 'trainAddPanelId', 21 constructor: function(){ 22 Ext.form.Field.prototype.msgTarget = 'side'; 23 Ext.QuickTips.init(); 24 var reader = new Ext.data.JsonReader({},[{ 25 name: 'train.trainTitle', mapping: 'trainTitle' 26 },{ 27 name: 'train.trainDate', mapping: 'trainDate' 28 },{ 29 name: 'train.trainPerson', mapping: 'trainPerson' 30 },{ 31 name: 'train.trainRemark', mapping: 'trainRemark' 32 },{ 33 name: 'train.trainContent', mapping: 'trainContent' 34 },{ 35 name: 'train.trainPlace', mapping: 'trainPlace' 36 },{ 37 name: 'train.trainId', mapping: 'trainId' 38 }]); 39 TrainAddPanel.superclass.constructor.call(this,{ 40 width: 450, 41 border: false, 42 height: 320, 43 frame: true, 44 layout: 'table', 45 reader: reader, 46 layoutConfig: { 47 columns: 2 48 }, 49 defaults: { 50 labelWidth: 60, 51 labelAlign: 'right' 52 }, 53 items:[{ 54 width: 200, 55 layout: 'form', 56 items: [{ 57 xtype: 'textfield', 58 fieldLabel: '标题', 59 allowBlank: false, 60 emptyText: '不能为空', 61 blankText: '不能为空', 62 width: 100, 63 name: 'train.trainTitle' 64 },{ 65 xtype: 'datefield', 66 fieldLabel: '时间', 67 allowBlank: false, 68 emptyText: '不能为空', 69 blankText: '不能为空', 70 width: 100, 71 name: 'train.trainDate', 72 format: 'Y-m-d' 73 }] 74 },{ 75 layout: 'form', 76 width: 200, 77 items: [{ 78 xtype: 'textfield', 79 fieldLabel: '培训人', 80 allowBlank: false, 81 emptyText: '不能为空', 82 blankText: '不能为空', 83 width: 100, 84 name: 'train.trainPerson' 85 },{ 86 xtype: 'textfield', 87 fieldLabel: '地点', 88 allowBlank: false, 89 emptyText: '不能为空', 90 width: 100, 91 blankText: '不能为空', 92 name: 'train.trainPlace' 93 }] 94 },{ 95 colspan: 2, 96 layout: 'form', 97 items: [{ 98 xtype: 'textarea', 99 fieldLabel: '内容',100 allowBlank: false,101 emptyText: '不能为空',102 blankText: '不能为空',103 width: 300,104 height: 100,105 name: 'train.trainContent'106 },{107 xtype: 'textarea',108 fieldLabel: '备注',109 width: 300,110 height: 100,111 name: 'train.trainRemark'112 },{113 xtype: 'hidden',114 name: 'train.trainId'115 }]116 }],117 buttonAlign: 'center',118 buttons: [{119 columnWidth: .5,120 text: '保存',121 iconCls: 'save',122 handler: saveTrainFn123 },{124 columnWidth: .5,125 text: '关闭',126 iconCls: 'cancel',127 handler: function(){128 Ext.getCmp('trainAddWinId').destroy();129 }130 }]131 })132 }133 });134 //保存135 saveTrainFn = function(){136 if(!Ext.getCmp('trainAddPanelId').getForm().isValid()){137 return;138 }139 Ext.getCmp('trainAddPanelId').getForm().submit({140 url: 'train_save.action',141 method: 'post',142 waitTitle: '提示',143 waitMsg: '正在保存数据...',144 success: saveTrainSuccessFn,145 failure: saveTrainFailureFn146 });147 };148 //保存成功处理149 saveTrainSuccessFn = function(form, action){150 Ext.Msg.confirm('提示',action.result.msg, function(button, text){151 if(button == "yes"){152 form.reset();153 Ext.getCmp('trainAddWinId').destroy();154 Ext.getCmp('trainInfoGridId').getStore().reload();155 }156 })157 };158 //保存失败处理159 saveTrainFailureFn = function(form, action){160 Ext.Msg.alert('提示','连接失败', function(button, text){});161 };
5. 培训信息详情页面
1 //培训信息详情窗口 2 TrainDetailWin = Ext.extend(Ext.Window,{ 3 id: 'trainDetailWinId', 4 constructor: function(){ 5 var trainDetailPanel = new TrainDetailPanel(); 6 TrainDetailWin.superclass.constructor.call(this, { 7 width: 500, 8 height: 400, 9 resizable: false, //不能改变窗体大小 10 title: '培训信息录入', 11 collapsible: true, 12 modal: true, 13 items: [trainDetailPanel] 14 }) 15 } 16 }) 17 //培训信息发布面板 18 TrainDetailPanel = Ext.extend(Ext.form.FormPanel,{ 19 id: 'trainDetailPanelId', 20 constructor: function(){ 21 Ext.QuickTips.init(); 22 var reader = new Ext.data.JsonReader({},[{ 23 name: 'train.trainTitle', mapping: 'trainTitle' 24 },{ 25 name: 'train.trainDate', mapping: 'trainDate' 26 },{ 27 name: 'train.trainPerson', mapping: 'trainPerson' 28 },{ 29 name: 'train.trainRemark', mapping: 'trainRemark' 30 },{ 31 name: 'train.trainContent', mapping: 'trainContent' 32 },{ 33 name: 'train.trainPlace', mapping: 'trainPlace' 34 },{ 35 name: 'train.trainId', mapping: 'trainId' 36 },{ 37 name: 'train.trainAddDate', mapping: 'trainAddDate' 38 },{ 39 name: 'train.trainAddPerson', mapping: 'trainAddPerson' 40 }]); 41 TrainDetailPanel.superclass.constructor.call(this,{ 42 width: 490, 43 border: false, 44 height: 370, 45 frame: true, 46 layout: 'table', 47 reader: reader, 48 layoutConfig: { 49 columns: 2 50 }, 51 defaults: { 52 labelWidth: 60, 53 labelAlign: 'right' 54 }, 55 items:[{ 56 layout: 'form', 57 items: [{ 58 xtype: 'textfield', 59 fieldLabel: '标题', 60 style: 'background: #dfe8f6;', 61 width: 150, 62 name: 'train.trainTitle', 63 readOnly: true 64 },{ 65 xtype: 'datefield', 66 fieldLabel: '时间', 67 width: 150, 68 style: 'background: #dfe8f6;', 69 name: 'train.trainDate', 70 format: 'Y-m-d', 71 readOnly: true 72 },{ 73 xtype: 'textfield', 74 fieldLabel: '添加人', 75 width: 150, 76 style: 'background: #dfe8f6;', 77 name: 'train.trainAddPerson', 78 readOnly: true 79 }] 80 },{ 81 layout: 'form', 82 items: [{ 83 xtype: 'textfield', 84 fieldLabel: '培训人', 85 width: 150, 86 style: 'background: #dfe8f6;', 87 name: 'train.trainPerson', 88 readOnly: true 89 },{ 90 xtype: 'textfield', 91 fieldLabel: '地点', 92 width: 150, 93 style: 'background: #dfe8f6;', 94 name: 'train.trainPlace', 95 readOnly: true 96 },{ 97 xtype: 'textfield', 98 fieldLabel: '添加时间', 99 width: 150,100 style: 'background: #dfe8f6;',101 name: 'train.trainAddDate',102 readOnly: true103 }]104 },{105 colspan: 2,106 layout: 'form',107 items: [{108 xtype: 'textarea',109 fieldLabel: '内容',110 width: 370,111 height: 100,112 style: 'background: #dfe8f6;',113 name: 'train.trainContent',114 readOnly: true115 },{116 xtype: 'textarea',117 fieldLabel: '备注',118 width: 370,119 height: 100,120 style: 'background: #dfe8f6;',121 name: 'train.trainRemark',122 readOnly: true123 }]124 }],125 buttonAlign: 'center',126 buttons: [{127 text: '关闭',128 iconCls: 'cancel',129 handler: function(){130 Ext.getCmp("trainDetailWinId").destroy();131 }132 }]133 })134 }135 });