无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

时间：2016-06-14 17:43:37 阅读：259 评论：0 收藏：0 [点我收藏+]
标签：
无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]

extjs技术交流，欢迎加群（201926085)
前面我们共介绍过10种表单组件，这些组件是我们在开发过程中最经常用到的，所以一定要用到非常熟练才可以，今天我们会通过一个员工信息表实例，再把这些组件串一下。
(1)TextField (2)Botton (3)NumberField (4)Hidden (5)DataFiedl (6)RadioGroup (7)CheckBoxGroup (8)Combobox (9)File (10)Editor
1.代码如下：
  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4     <title></title>
  5     <!--ExtJs框架开始-->
  6     <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
  7     <script type="text/javascript" src="/Ext/ext-all.js"></script>
  8     <script src="/Ext/src/locale/ext-lang-zh_CN.js" type="text/javascript"></script>
  9     <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
 10     <style type="text/css">
 11         .x-form-unit
 12         {
 13             height: 22px;
 14             line-height: 22px;
 15             padding-left: 2px;
 16             display: inline-block;
 17             display: inline;
 18         }
 19     </style>
 20     <!--ExtJs框架结束-->
 21     <script type="text/javascript">
 22 
 23         //----------------------重写文本框开始----------------------//
 24         Ext.override(Ext.form.TextField, {
 25             unitText: ‘‘,
 26             onRender: function (ct, position) {
 27                 Ext.form.TextField.superclass.onRender.call(this, ct, position);
 28                 // 如果单位字符串已定义 则在后方增加单位对象   
 29                 if (this.unitText != ‘‘) {
 30                     this.unitEl = ct.createChild({
 31                         tag: ‘div‘,
 32                         html: this.unitText
 33                     });
 34                     this.unitEl.addClass(‘x-form-unit‘);
 35                     // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况   
 36                     this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2);
 37                     // 同时修改错误提示图标的位置   
 38                     this.alignErrorIcon = function () {
 39                         this.errorIcon.alignTo(this.unitEl, ‘tl-tr‘, [2, 0]);
 40                     };
 41                 }
 42             }
 43         });
 44         //----------------------重写文本框结束----------------------//
 45 
 46         Ext.onReady(function () {
 47             //初始化标签中的Ext:Qtip属性。
 48             Ext.QuickTips.init();
 49             Ext.form.Field.prototype.msgTarget = ‘side‘;
 50 
 51             //------------第一列内容开始-------------//
 52             //姓名
 53             var txtusername = new Ext.form.TextField({
 54                 width: 130,
 55                 allowBlank: false,
 56                 maxLength: 4,
 57                 name: ‘username‘,
 58                 fieldLabel: ‘姓名‘,
 59                 blankText: ‘请输入姓名‘,
 60                 maxLengthText: ‘姓名不能超过4个字符‘
 61             });
 62             //政治面貌数据源
 63             var combostore = new Ext.data.ArrayStore({
 64                 fields: [‘id‘, ‘name‘],
 65                 data: [[1, ‘团员‘], [2, ‘党员‘], [3, ‘其他‘]]
 66             });
 67             //政治面貌下拉列表
 68             var cobpolitical = new Ext.form.ComboBox({
 69                 width: 130,
 70                 allowBlank: false,
 71                 fieldLabel: ‘政治面貌‘,
 72                 store: combostore,
 73                 displayField: ‘name‘,
 74                 valueField: ‘id‘,
 75                 triggerAction: ‘all‘,
 76                 emptyText: ‘请选择...‘,
 77                 blankText: ‘请选择政治面貌‘,
 78                 editable: false,
 79                 mode: ‘local‘
 80             });
 81             //毕业院校
 82             var txtgraduateschool = new Ext.form.TextField({
 83                 width: 130,
 84                 allowBlank: false,
 85                 maxLength: 10,
 86                 name: ‘graduateschool‘,
 87                 fieldLabel: ‘毕业院校‘,
 88                 blankText: ‘请输入毕业院校‘,
 89                 maxLengthText: ‘毕业院校不能超过10个字符‘
 90             });
 91             //通信地址
 92             var txtaddress = new Ext.form.TextField({
 93                 width: 130,
 94                 allowBlank: false,
 95                 maxLength: 30,
 96                 name: ‘address‘,
 97                 fieldLabel: ‘通信地址‘,
 98                 blankText: ‘请输入通信地址‘,
 99                 maxLengthText: ‘通信地址不能超过30个字符‘
100             });
101             //第一列包含4行
102             var column1 = {
103                 columnWidth: .28,
104                 layout: ‘form‘,
105                 items: [
106                     txtusername, cobpolitical, txtgraduateschool, txtaddress
107                 ]
108             };
109             //------------第一列内容结束-------------//
110             //------------第二列内容开始-------------//
111             //性别
112             var rdosex = new Ext.form.RadioGroup({
113                 fieldLabel: ‘性别‘,
114                 width: 130,
115                 style: ‘padding-top:3px;height:17px;‘,
116                 items: [{ name: ‘sex‘, inputValue: ‘0‘, boxLabel: ‘男‘, checked: true }, { name: ‘sex‘, inputValue: ‘1‘, boxLabel: ‘女‘}]
117             });
118             //身高
119             var numheight = new Ext.form.NumberField({
120                 fieldLabel: ‘身高‘,
121                 width: 117,
122                 decimalPrecision: 0,
123                 minValue: 1,
124                 maxValue: 400,
125                 name: ‘height‘,
126                 unitText: ‘ cm‘,
127                 allowBlank: false,
128                 blankText: ‘请输入身高‘
129             });
130             //毕业专业
131             var txtprofessional = new Ext.form.TextField({
132                 width: 130,
133                 allowBlank: false,
134                 maxLength: 30,
135                 name: ‘professional‘,
136                 fieldLabel: ‘毕业专业‘,
137                 blankText: ‘请输入毕业专业‘,
138                 maxLengthText: ‘毕业专业不能超过30个字符‘
139             });
140             //联系电话
141             var txtphone = new Ext.form.TextField({
142                 width: 130,
143                 allowBlank: false,
144                 maxLength: 20,
145                 name: ‘phone‘,
146                 fieldLabel: ‘联系电话‘,
147                 blankText: ‘请输入联系电话‘,
148                 maxLengthText: ‘联系电话不能超过20个字符‘
149             });
150             //第二列包含4行
151             var column2 = {
152                 columnWidth: .28,
153                 layout: ‘form‘,
154                 items: [rdosex, numheight, txtprofessional, txtphone]
155             };
156             //------------第二列内容结束-------------//
157             //------------第三列内容开始-------------//
158             //年龄
159             var numage = new Ext.form.NumberField({
160                 fieldLabel: ‘年龄‘,
161                 width: 117,
162                 decimalPrecision: 0,
163                 minValue: 1,
164                 maxValue: 60,
165                 name: ‘age‘,
166                 unitText: ‘ 岁‘,
167                 allowBlank: false,
168                 blankText: ‘请输入年龄‘
169             });
170             //体重
171             var numweight = new Ext.form.NumberField({
172                 fieldLabel: ‘体重‘,
173                 width: 117,
174                 decimalPrecision: 0,
175                 minValue: 1,
176                 maxValue: 300,
177                 name: ‘age‘,
178                 unitText: ‘ kg‘,
179                 allowBlank: false,
180                 blankText: ‘请输入体重‘
181             });
182             //毕业日期
183             var dategraduation = new Ext.form.DateField({
184                 fieldLabel: ‘毕业日期‘,
185                 name: ‘graduationdate‘,
186                 width: 117,
187                 format: ‘Y-m-d‘,
188                 editable: false,
189                 allowBlank: false,
190                 blankText: ‘请选择毕业日期‘
191             });
192             //第三列包含3行
193             var column3 = {
194                 columnWidth: .25,
195                 layout: ‘form‘,
196                 items: [numage, numweight, dategraduation]
197             };
198             //------------第三列内容结束-------------//
199             //------------第四列内容开始-------------//
200             //创建div组件
201             var imagebox = new Ext.BoxComponent({
202                 autoEl: {
203                     style: ‘width:65px;height:60px;margin:0px auto;border:1px solid #ccc; text-align:center;padding-top:10px;margin-bottom:8px‘,
204                     tag: ‘div‘,
205                     id: ‘imageshow‘,
206                     html: ‘暂无相片‘
207                 }
208             });
209             var uploadbutton = new Ext.Button({
210                 text: ‘上传相片‘,
211                 style: ‘margin:0px auto;‘,
212                 handler: function () {
213                     alert(‘弹出新窗体上传相片!‘);
214                 }
215             });
216             var column4 = {
217                 columnWidth: .16,
218                 layout: ‘form‘,
219                 items: [imagebox, uploadbutton]
220             };
221             //------------第四列内容结束-------------//
222             //招聘来源
223             var checksource = new Ext.form.CheckboxGroup({
224                 fieldLabel: ‘招聘来源‘,
225                 style: ‘padding-top:3px;height:17px;‘,
226                 items: [{
227                     boxLabel: ‘报纸招聘‘,
228                     inputValue: ‘0‘
229                 }, {
230                     boxLabel: ‘校园招聘‘,
231                     inputValue: ‘1‘
232                 }, {
233                     boxLabel: ‘人才市场‘,
234                     inputValue: ‘2‘
235                 }, {
236                     boxLabel: ‘招聘网站‘,
237                     inputValue: ‘3‘
238                 }]
239             });
240             //创建文本上传域
241             var exteditor = new Ext.form.HtmlEditor({
242                 fieldLabel: ‘其他信息‘,
243                 width: 745,
244                 height: 320
245             });
246             //表单
247             var form = new Ext.form.FormPanel({
248                 frame: true,
249                 title: ‘员工信息表‘,
250                 style: ‘margin:10px‘,
251                 labelWidth: 70,
252                 buttonAlign: ‘center‘,
253                 items: [{
254                     layout: ‘column‘,
255                     items: [
256                         column1,
257                         column2,
258                         column3,
259                         column4
260                     ]
261                 }, checksource,
262                     exteditor
263                 ],
264                 buttons: [{
265                     text: ‘保存‘,
266                     handler: function () { alert(‘保存方法!‘) }
267                 }, {
268                     text: ‘重置‘,
269                     handler: function () { alert(‘重置方法!‘) }
270                 }]
271             });
272             //窗体
273             var win = new Ext.Window({
274                 title: ‘窗口‘,
275                 width: 900,
276                 height: 580,
277                 resizable: true,
278                 modal: true,
279                 closable: true,
280                 maximizable: true,
281                 minimizable: true,
282                 buttonAlign: ‘center‘,
283                 items: form
284             });
285             win.show();
286 
287         });
288     </script>
289 </head>
290 <body>
291 <!--
292 说明：
293 (1)254行layout: ‘column‘：以列的方式布局，这里总共分了4列，布局的内容下个教程讲解。
294 -->
295 </body>
296 </html>
2.效果如下：
技术分享