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 trainPanel = new TrainPanel(); 15 var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1]; 16 juage(tabId,"train",trainPanel,"train"); 17 </script> 18 19 </head> 20 <body> 21 <div id="train" ></div> 22 </body> 23 </html>
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 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: 20 102 } 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: trainId 130 } 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: trainId 149 } 150 }) 151 trainAddWin.show(); 152 }; 153 154 /** 155 * 按条件查询面板 156 * @author sux 2011-02-20 157 * @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: 6 176 }, 177 defaults: { 178 labelWidth: 60, 179 labelAlign: 'right' 180 }, 181 items: [{ 182 layout: 'form', 183 items: [{ 184 xtype: 'textfield', 185 fieldLabel: '培训人', 186 100, 187 id: 'train_person' 188 }] 189 },{ 190 layout: 'form', 191 items: [{ 192 xtype: 'textfield', 193 fieldLabel: '培训主题', 194 100, 195 id: 'train_title' 196 }] 197 },{ 198 layout: 'form', 199 items: [{ 200 xtype: 'datefield', 201 fieldLabel: '开始时间', 202 format: 'Y-m-d', 203 100, 204 id: 'start_date' 205 }] 206 },{ 207 layout: 'form', 208 items: [{ 209 xtype: 'datefield', 210 fieldLabel: '结束时间', 211 format: 'Y-m-d', 212 100, 213 id: 'end_date' 214 }] 215 },{ 216 style: 'margin: 0px 10px 0px 20px;', 217 xtype: 'button', 218 text: '查询', 219 iconCls: 'search', 220 handler: queryTrainFn 221 },{ 222 xtype: 'button', 223 text: '取消', 224 iconCls:'cancel', 225 handler: cancelTrainFn 226 }] 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: 20 246 } 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 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 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 200, 55 layout: 'form', 56 items: [{ 57 xtype: 'textfield', 58 fieldLabel: '标题', 59 allowBlank: false, 60 emptyText: '不能为空', 61 blankText: '不能为空', 62 100, 63 name: 'train.trainTitle' 64 },{ 65 xtype: 'datefield', 66 fieldLabel: '时间', 67 allowBlank: false, 68 emptyText: '不能为空', 69 blankText: '不能为空', 70 100, 71 name: 'train.trainDate', 72 format: 'Y-m-d' 73 }] 74 },{ 75 layout: 'form', 76 200, 77 items: [{ 78 xtype: 'textfield', 79 fieldLabel: '培训人', 80 allowBlank: false, 81 emptyText: '不能为空', 82 blankText: '不能为空', 83 100, 84 name: 'train.trainPerson' 85 },{ 86 xtype: 'textfield', 87 fieldLabel: '地点', 88 allowBlank: false, 89 emptyText: '不能为空', 90 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 300, 104 height: 100, 105 name: 'train.trainContent' 106 },{ 107 xtype: 'textarea', 108 fieldLabel: '备注', 109 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: saveTrainFn 123 },{ 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: saveTrainFailureFn 146 }); 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 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 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 150, 62 name: 'train.trainTitle', 63 readOnly: true 64 },{ 65 xtype: 'datefield', 66 fieldLabel: '时间', 67 150, 68 style: 'background: #dfe8f6;', 69 name: 'train.trainDate', 70 format: 'Y-m-d', 71 readOnly: true 72 },{ 73 xtype: 'textfield', 74 fieldLabel: '添加人', 75 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 150, 86 style: 'background: #dfe8f6;', 87 name: 'train.trainPerson', 88 readOnly: true 89 },{ 90 xtype: 'textfield', 91 fieldLabel: '地点', 92 150, 93 style: 'background: #dfe8f6;', 94 name: 'train.trainPlace', 95 readOnly: true 96 },{ 97 xtype: 'textfield', 98 fieldLabel: '添加时间', 99 150, 100 style: 'background: #dfe8f6;', 101 name: 'train.trainAddDate', 102 readOnly: true 103 }] 104 },{ 105 colspan: 2, 106 layout: 'form', 107 items: [{ 108 xtype: 'textarea', 109 fieldLabel: '内容', 110 370, 111 height: 100, 112 style: 'background: #dfe8f6;', 113 name: 'train.trainContent', 114 readOnly: true 115 },{ 116 xtype: 'textarea', 117 fieldLabel: '备注', 118 370, 119 height: 100, 120 style: 'background: #dfe8f6;', 121 name: 'train.trainRemark', 122 readOnly: true 123 }] 124 }], 125 buttonAlign: 'center', 126 buttons: [{ 127 text: '关闭', 128 iconCls: 'cancel', 129 handler: function(){ 130 Ext.getCmp("trainDetailWinId").destroy(); 131 } 132 }] 133 }) 134 } 135 });