77.招聘信息管理 EXTJS 页面

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 <html>
 7   <head>
 8     <base href="<%=basePath%>">
 9     
10     <title>招聘管理</title>
11     
12     <meta http-equiv="pragma" content="no-cache">
13     <meta http-equiv="cache-control" content="no-cache">
14     <meta http-equiv="expires" content="0">    
15     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
16     <meta http-equiv="description" content="This is my page">
17     <script type="text/javascript">
18     
19         var recruitmentPanel = new RecruitmentPanel();
20         var tabId = Ext.getCmp('mainTab').getActiveTab().id.split('_')[1];
21         juage(tabId,"rec",recruitmentPanel,"recruitment");
22     </script>
23   </head>
24   
25   <body>
26     <div id="recruitment"></div>
27   </body>
28 </html>

2.招聘信息页面js

  1 /**
  2  * 招聘信息管理模块
  3  * @memberOf {TypeName} 
  4  */
  5 RecruitmentPanel = Ext.extend(Ext.Panel,{
  6     id: 'recruitmentPanelId',
  7     constructor: function(){
  8         var recruitmentGridPanel = new RecruitmentGridPanel();
  9         var recQueryPanel = new RecQueryPanel();
 10         RecruitmentPanel.superclass.constructor.call(this, {
 11             items: [recQueryPanel,recruitmentGridPanel]
 12         })
 13     }
 14 });
 15 /**
 16  * 招聘信息列表
 17  * @author sux
 18  * @memberOf {TypeName} 
 19  * @return {TypeName} 
 20  */
 21 RecruitmentGridPanel = Ext.extend(Ext.grid.GridPanel,{
 22     id: 'recruitmentGridId',
 23     constructor: function(){
 24         var rmStore = new Ext.data.JsonStore({
 25             url: 'rec_list.action',
 26             root: 'root',
 27              totalProperty: 'totalProperty',
 28             fields: ['recId','recTitle','recJob','recNum', 
 29                 {name: 'recDate', mapping: 'recDate    .time', dateFormat : 'time', type: 'date' }]
 30         });
 31         var rowNumber = new Ext.grid.RowNumberer(); //序列号    
 32         var sm = new Ext.grid.CheckboxSelectionModel(); 
 33         var cm = new Ext.grid.ColumnModel([
 34             rowNumber, sm, 
 35         {
 36             header: '编号',
 37             dataIndex: 'recId',
 38             align: 'center'
 39         },{
 40             header: '标题',
 41             dataIndex: 'recTitle',
 42             align: 'center'
 43         },{
 44             header: '职位',
 45             dataIndex: 'recJob',
 46             align: 'center'
 47         },{
 48             header: '人数',
 49             dataIndex: 'recNum',
 50             align: 'center'
 51         },{
 52             header: '发布日期',
 53             align: 'center',
 54             renderer: Ext.util.Format.dateRenderer('Y-m-d'), //有用
 55             dataIndex: 'recDate'
 56         }]);
 57         RecruitmentGridPanel.superclass.constructor.call(this,{
 58              Ext.getCmp('mainTab').getActiveTab().getInnerWidth(),
 59             height: Ext.getCmp('mainTab').getActiveTab().getInnerHeight(),
 60             /**表格高度自适应 document.body.clientHeight浏览器页面高度 start**/
 61             monitorResize: true, 
 62             doLayout: function() { 
 63                 this.setWidth(document.body.clientWidth-205);
 64                 this.setHeight(document.body.clientHeight-250);
 65                 Ext.grid.GridPanel.prototype.doLayout.call(this); 
 66             } ,
 67             border: false,
 68             viewConfig: {
 69                 forceFit: true
 70             },
 71             height: 430,
 72             cm: cm,
 73             sm: sm,
 74             store: rmStore,
 75             tbar: new Ext.Toolbar({
 76                 items: [
 77                 {
 78                     text: '删除',
 79                     iconCls: 'delete',
 80                     id: 'rec_delete',
 81                     handler: recruitmentDelFn
 82                 },{
 83                     text: '添加',
 84                     iconCls: 'add',
 85                     id: 'rec_add',
 86                     handler: recruitmentInfoAddFn
 87                 },{
 88                     text: '修改',
 89                     iconCls: 'update',
 90                     id: 'rec_update',
 91                     handler: recruitmentInfoUpdateFn
 92                 },{
 93                     text: '详情',
 94                     iconCls: 'detail',
 95                     id: 'rec_detail',
 96                     handler: recruitmentInfoDetailFn
 97                 }]
 98             }),
 99             bbar:new PagingToolbar(rmStore, 20) 
100         });
101         rmStore.load({
102             params: {
103                 start: 0,
104                 limit: 20
105             }
106         });
107     }
108 });
109 recruitmentInfoAddFn = function(){
110     var recruitmentAddWin = new RecruitmentAddWin();
111     recruitmentAddWin.show();
112 };
113 recruitmentInfoUpdateFn = function(){
114     var recruitmentAddWin = new RecruitmentAddWin();
115     recruitmentAddWin.title = '招聘信息修改';
116     var selectionModel = Ext.getCmp('recruitmentGridId').getSelectionModel();
117     var record = selectionModel.getSelections();
118     if(record.length != 1){
119         Ext.Msg.alert('提示','请选择一个');
120         return;
121     }
122     var recId = record[0].get('recId');
123     Ext.getCmp('recruitmentAddPanelId').getForm().load({
124         url: 'recruitment_intoUpdate.action',
125         params: {
126             recId: recId
127         }
128     })
129     recruitmentAddWin.show();
130 };
131 recruitmentInfoDetailFn = function(){
132     var recruitmentDetailWin = new RecruitmentDetailWin();
133     recruitmentDetailWin.title = '招聘信息';
134     var selectionModel = Ext.getCmp('recruitmentGridId').getSelectionModel();
135     var record = selectionModel.getSelections();
136     if(record.length != 1){
137         Ext.Msg.alert('提示','请选择一个');
138         return;
139     }
140     var recId = record[0].get('recId');
141     Ext.getCmp('recruitmentDetailPanelId').getForm().load({
142         url: 'recruitment_intoUpdate.action',
143         params: {
144             recId: recId
145         }
146     })
147     recruitmentDetailWin.show();
148 };
149 recruitmentDelFn = function(){
150     gridDel('recruitmentGridId','recId', 'recruitment_delete.action');
151 };
152 /**
153  * 按条件查询面板
154  * @author sux 2011-02-20
155  * @memberOf {TypeName} 
156  */
157 RecQueryPanel = Ext.extend(Ext.form.FormPanel,{
158     id: 'recQueryId',
159     constructor: function(){
160         RecQueryPanel.superclass.constructor.call(this,{
161             collapsible: true,
162             titleCollapse: true, //单击整个collapse都有效
163             //collapsed: true, //渲染后即闭合
164             title: '条件查询',
165             border: false,
166             frame: true,
167             autoWidth: true,
168             defaultType: 'fieldset',
169             items: [{
170                 title: '条件',
171                 layout: 'table',
172                 layoutConfig: {
173                     columns: 6
174                 },
175                 defaults: {
176                     labelWidth: 60,
177                     labelAlign: 'right'
178                 },
179                 items: [{
180                     layout: 'form',
181                     items: [{
182                         xtype: 'textfield',
183                         fieldLabel: '标题',
184                          100,
185                         id: 'recTitle'
186                     }]
187                 },{
188                     layout: 'form',
189                     items: [{
190                         xtype: 'textfield',
191                         fieldLabel: '职位',
192                          100,
193                         id: 'recJob'
194                     }]
195                 },{
196                     layout: 'form',
197                     items: [{
198                         xtype: 'datefield',
199                         fieldLabel: '查询日期',
200                         format: 'Y-m-d',
201                         editable: false,
202                          100,
203                         id: 'recStartDate'
204                     }]
205                 },{
206                     layout: 'form',
207                     items: [{
208                         xtype: 'datefield',
209                         fieldLabel: '至',
210                         format: 'Y-m-d',
211                         editable: false,
212                          100,
213                         id: 'recEndDate'
214                     }]
215                 },{
216                     style: 'margin: 0px 10px 0px 20px;',
217                     xtype: 'button',
218                     text: '查询',
219                     iconCls: 'search',
220                     handler: queryRecFn
221                 },{
222                     xtype: 'button',
223                     text: '取消',
224                     iconCls: 'cancel',
225                     handler: cancelRecFn
226                 }]
227             }]
228         })
229     }
230 });
231 queryRecFn = function(){
232     var recTitle = Ext.get('recTitle').dom.value;
233     var recJob = Ext.get('recJob').dom.value;
234     var startDate = Ext.get('recStartDate').dom.value;
235     var endDate = Ext.get('recEndDate').dom.value;
236     Ext.getCmp('recruitmentGridId').getStore().load({
237         params: {
238             type: 'query',
239             recTitle: recTitle,
240             recJob: recJob,
241             startDate: startDate,
242             endDate: endDate,
243             start: 0,
244             limit: 20
245         }
246     });
247 };
248 cancelRecFn = function(){
249     Ext.getCmp('recQueryId').getForm().reset();
250 }

3.招聘信息添加窗口

  1 /**
  2  * 招聘添加窗口
  3  * @author sux
  4  * @memberOf {TypeName} 
  5  */
  6 RecruitmentAddWin = Ext.extend(Ext.Window,{
  7     id: 'recruitmentAddWinId',
  8     constructor: function(){
  9         var recruitmentAddPanel = new RecruitmentAddPanel();
 10         RecruitmentAddWin.superclass.constructor.call(this, {
 11             title: '招聘信息录入',
 12             resizable: false,
 13             modal: true,
 14              1000,
 15             height: 300,
 16             items: [recruitmentAddPanel]
 17         })            
 18     }
 19 });
 20 
 21 RecruitmentAddPanel = Ext.extend(Ext.form.FormPanel,{
 22     id: 'recruitmentAddPanelId',
 23     constructor: function(){
 24         Ext.QuickTips.init();
 25         var reader = new Ext.data.JsonReader({},[{
 26             name: 'recruitment.recTitle', mapping: 'recTitle'
 27         },{
 28             name: 'recruitment.recStart', mapping: 'recStart.time', dateFormat : 'time', type: 'date'
 29         },{
 30             name: 'recruitment.recEnd', mapping: 'recEnd.time', dateFormat : 'time', type: 'date'
 31         },{
 32             name: 'recruitment.recJob', mapping: 'recJob'
 33         },{
 34             name: 'recruitment.recNum', mapping: 'recNum'
 35         },{
 36             name: 'recruitment.recContent', mapping: 'recContent'
 37         },{
 38             name: 'recruitment.recRemark', mapping: 'recRemark'
 39         },{
 40             name: 'recruitment.recId', mapping: 'recId'
 41         }]);
 42         RecruitmentAddPanel.superclass.constructor.call(this,{
 43              frame: true,
 44              border: false,
 45              reader: reader,
 46             items: [{
 47                 xtype: 'fieldset',
 48                 title: '招聘信息录入',
 49                  layout: 'table',
 50                  layoutConfig: {
 51                     columns: 5
 52                  },
 53                  defaults: {
 54                      labelWidth: 60,
 55                      labelAlign: 'right'
 56                  },
 57                 items: [{
 58                          190,
 59                         layout: 'form',
 60                         items: [{
 61                             xtype: 'textfield',
 62                              100,
 63                             fieldLabel: '标题',
 64                             allowBlank: false,
 65                             blankText: '不能为空',
 66                             msgTarget: 'side',
 67                             emptyText: '不能为空',
 68                             name: 'recruitment.recTitle'
 69                         }]                        
 70                     },{
 71                          190,
 72                         layout: 'form',
 73                         xtype: 'panel',
 74                         items: [{
 75                             xtype: 'datefield',
 76                             editable: false,
 77                             fieldLabel: '开始时间',
 78                             format: 'Y-m-d',
 79                              100,
 80                             name: 'recruitment.recStart'
 81                         }]
 82                     },{
 83                          190,
 84                         layout: 'form',
 85                         items: [{
 86                             xtype: 'datefield',
 87                             editable: false,
 88                             fieldLabel: '结束时间',
 89                              100,
 90                             format: 'Y-m-d',
 91                             name: 'recruitment.recEnd'
 92                         }]
 93                     },{
 94                          200,
 95                         layout: 'form',
 96                         items: [{
 97                             xtype: 'textfield',
 98                             fieldLabel: '职位',
 99                             allowBlank: false,
100                             blankText: '不能为空',
101                             msgTarget: 'side',
102                             emtyText: '不能为空',
103                              100,
104                             name: 'recruitment.recJob'
105                         }]
106                     },{
107                          200,
108                         layout: 'form',
109                         items: [{
110                             xtype: 'textfield',
111                             fieldLabel: '人数',
112                              100,
113                             name: 'recruitment.recNum'
114                         }]
115                     },{
116                         colspan: 3,
117                         layout: 'form',
118                         items: [{
119                             xtype: 'textarea',
120                             fieldLabel: '要求',
121                             allowBlank: false,
122                             blankText: '不能为空',
123                             msgTarget: 'side',
124                             emtyText: '不能为空',
125                              460,
126                             height: 140,
127                             name: 'recruitment.recContent'
128                         }]
129                     },{
130                         colspan: 2,
131                         layout: 'form',
132                         items: [{
133                             xtype: 'textarea',
134                             fieldLabel: '备注',
135                              300,
136                             height: 140,
137                             name: 'recruitment.recRemark'
138                         },{
139                             xtype: 'hidden',
140                             name: 'recruitment.recId'
141                         }]
142                     },{
143                         colspan: 5,
144                         buttonAlign: 'center',
145                         buttons: [{
146                             text: '保存',
147                             iconCls: 'save',
148                             handler: reSubmit
149                         },{
150                             text: '关闭',
151                             iconCls: 'cancel',
152                             handler: reCancel
153                         }]
154                     }]
155                 }]
156         });
157     }
158 });
159 reSubmit = function(){
160     if(!Ext.getCmp('recruitmentAddPanelId').getForm().isValid()){
161             return;
162         }
163     Ext.getCmp('recruitmentAddPanelId').getForm().submit({
164         url: 'recruitment_save.action',
165         method: 'post',
166         waitTitle: '提示',
167         waitMsg: '正在保存数据...',
168         success: function(form, action){
169             Ext.Msg.confirm('提示',action.result.msg,function(button, text){
170                 if(button == 'yes'){
171                     Ext.getCmp('recruitmentAddWinId').destroy();
172                     Ext.getCmp('recruitmentGridId').getStore().reload();
173                 }
174             })
175         },
176         failure: function(form, action){
177             Ext.Msg.alert('提示','连接后台失败');
178         }
179     })
180 };
181 reCancel = function(){
182     Ext.getCmp('recruitmentAddWinId').destroy();
183 };

4.

  1 RecruitmentDetailWin = Ext.extend(Ext.Window,{
  2     id: 'recruitmentDetailWinId',
  3      900,
  4     height: 380,
  5     constructor: function(){
  6         var recruitmentDetailPanel = new RecruitmentDetailPanel();
  7         RecruitmentDetailWin.superclass.constructor.call(this, {
  8             modal: true,
  9             items: [recruitmentDetailPanel]
 10         });
 11     }
 12 });
 13 
 14 RecruitmentDetailPanel = Ext.extend(Ext.form.FormPanel,{
 15     id: 'recruitmentDetailPanelId',
 16     constructor: function(){
 17     Ext.QuickTips.init();
 18         var reader = new Ext.data.JsonReader({},[{
 19             name: 'recTitle', mapping: 'recTitle'
 20         },{
 21             name: 'recStart', mapping: 'recStart.time', dateFormat : 'time', type: 'date'
 22         },{
 23             name: 'recEnd', mapping: 'recEnd.time', dateFormat : 'time', type: 'date'
 24         },{
 25             name: 'recJob', mapping: 'recJob'
 26         },{
 27             name: 'recNum', mapping: 'recNum'
 28         },{
 29             name: 'recContent', mapping: 'recContent'
 30         },{
 31             name: 'recRemark', mapping: 'recRemark'
 32         },{
 33             name: 'recDate', mapping: 'recDate',  mapping: 'recDate.time', dateFormat : 'time', type: 'date'
 34         },{
 35             name: 'recPerson', mapping: 'recPerson'
 36         }]);
 37         RecruitmentDetailPanel.superclass.constructor.call(this, {
 38             frame: true,
 39              border: false,
 40              reader: reader,
 41             items: [{
 42                 xtype: 'fieldset',
 43                 title: '招聘信息录入',
 44                  layout: 'table',
 45                  layoutConfig: {
 46                     columns: 5
 47                  },
 48                  defaults: {
 49                      labelWidth: 60,
 50                      labelAlign: 'right'
 51                  },
 52                 items: [{
 53                         layout: 'form',
 54                         items: [{
 55                             xtype: 'textfield',
 56                              100,
 57                             fieldLabel: '标题',
 58                             allowBlank: false,
 59                             blankText: '不能为空',
 60                             msgTarget: 'title',
 61                             emptyText: '不能为空',
 62                             name: 'recTitle',
 63                             style: 'background: #dfe8f6;',
 64                             readOnly: true
 65                         }]                        
 66                     },{
 67                         layout: 'form',
 68                         xtype: 'panel',
 69                         items: [{
 70                             xtype: 'datefield',
 71                             fieldLabel: '开始时间',
 72                             format: 'Y-m-d',
 73                              100,
 74                             name: 'recStart',
 75                             style: 'background: #dfe8f6;',
 76                             readOnly: true
 77                         }]
 78                     },{
 79                         layout: 'form',
 80                         items: [{
 81                             xtype: 'datefield',
 82                             fieldLabel: '结束时间',
 83                              100,
 84                             format: 'Y-m-d',
 85                             name: 'recEnd',
 86                             style: 'background: #dfe8f6;',
 87                             readOnly: true
 88                         }]
 89                     },{
 90                         layout: 'form',
 91                         items: [{
 92                             xtype: 'textfield',
 93                             fieldLabel: '职位',
 94                             allowBlank: false,
 95                             blankText: '不能为空',
 96                             msgTarget: 'title',
 97                             emtyText: '不能为空',
 98                              100,
 99                             name: 'recJob',
100                             style: 'background: #dfe8f6;',
101                             readOnly: true
102                         }]
103                     },{
104                         layout: 'form',
105                         items: [{
106                             xtype: 'textfield',
107                             fieldLabel: '人数',
108                              100,
109                             name: 'recNum',
110                             style: 'background: #dfe8f6;',
111                             readOnly: true
112                         }]
113                     },{
114                         colspan: 3,
115                         layout: 'form',
116                         items: [{
117                             xtype: 'textarea',
118                             fieldLabel: '要求',
119                             allowBlank: false,
120                             blankText: '不能为空',
121                             msgTarget: 'title',
122                             emtyText: '不能为空',
123                              430,
124                             height: 200,
125                             name: 'recContent',
126                             style: 'background: #dfe8f6;',
127                             readOnly: true
128                         }]
129                     },{
130                         colspan: 2,
131                         layout: 'form',
132                         items: [{
133                             xtype: 'textarea',
134                             fieldLabel: '备注',
135                              270,
136                             height: 200,
137                             name: 'recRemark',
138                             style: 'background: #dfe8f6;',
139                             readOnly: true
140                         }]
141                     },{
142                         layout: 'form',
143                         items: [{
144                             xtype: 'textfield',
145                              100,
146                             name: 'recPerson',
147                             fieldLabel: '录入人',
148                             style: 'background: #dfe8f6;',
149                             readOnly: true
150                         }]
151                     },{
152                         layout: 'form',
153                         items: [{
154                             xtype: 'datefield',
155                              100,
156                             name: 'recDate',
157                             fieldLabel: '录入时间',
158                             format: 'Y-m-d',
159                             style: 'background: #dfe8f6;',
160                             readOnly: true
161                         }]
162                     },{
163                         colspan: 3
164                     },{
165                         colspan: 5,
166                         buttonAlign: 'center',
167                         buttons: [{
168                             text: '关闭',
169                             iconCls: 'cancel',
170                             handler: recCloseFn
171                         }]
172                     }]
173                 }]
174         });
175     }
176 });
177 recCloseFn = function(){
178     Ext.getCmp('recruitmentDetailWinId').destroy();
179 }
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/sharpest/p/7660481.html