无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]
extjs技术交流，欢迎加群（338456177）：
继上第六节内容，我们在表单里加了个一个数字字段，隐藏字段，日期字段。如下代码所:
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><!--中文翻译js--> 9 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 10 <!--ExtJs框架结束--> 11 <style type="text/css"> 12 .x-form-unit 13 { 14 height: 22px; 15 line-height: 22px; 16 padding-left: 2px; 17 display: inline-block; 18 display: inline; 19 } 20 </style> 21 <script type="text/javascript"> 22 //----------------------重写文本框开始----------------------// 23 Ext.override(Ext.form.TextField, { 24 unitText: '', 25 onRender: function (ct, position) { 26 Ext.form.TextField.superclass.onRender.call(this, ct, position); 27 // 如果单位字符串已定义 则在后方增加单位对象 28 if (this.unitText != '') { 29 this.unitEl = ct.createChild({ 30 tag: 'div', 31 html: this.unitText 32 }); 33 this.unitEl.addClass('x-form-unit'); 34 // 增加单位名称的同时 按单位名称大小减少文本框的长度 初步考虑了中英文混排 未考虑为负的情况 35 this.width = this.width - (this.unitText.replace(/[^\x00-\xff]/g, "xx").length * 6 + 2); 36 // 同时修改错误提示图标的位置 37 this.alignErrorIcon = function () { 38 this.errorIcon.alignTo(this.unitEl, 'tl-tr', [2, 0]); 39 }; 40 } 41 } 42 }); 43 //----------------------重写文本框结束----------------------// 44 45 Ext.onReady(function () { 46 //初始化标签中的Ext:Qtip属性。 47 Ext.QuickTips.init(); 48 Ext.form.Field.prototype.msgTarget = 'side'; 49 50 //提交按钮处理方法 51 var btnsubmitclick = function () { 52 Ext.MessageBox.alert('提示', '你点了确定按钮!'); 53 } 54 //重置按钮"点击时"处理方法 55 var btnresetclick = function () { 56 Ext.MessageBox.alert('提示', '你点了重置按钮!'); 57 } 58 //重置按钮"鼠标悬停"处理方法 59 var btnresetmouseover = function () { 60 Ext.MessageBox.alert('提示', '你鼠标悬停在重置按钮之上!'); 61 } 62 //提交按钮 63 var btnsubmit = new Ext.Button({ 64 text: '提交', 65 handler: btnsubmitclick 66 }); 67 //重置按钮 68 var btnreset = new Ext.Button({ 69 text: '重置', 70 listeners: { 71 'mouseover': btnresetmouseover, 72 'click': btnresetclick 73 } 74 }); 75 //用户名input 76 var txtusername = new Ext.form.TextField({ 77 width: 140, 78 allowBlank: false, 79 maxLength: 20, 80 name: 'username', 81 fieldLabel: '用户名称', 82 blankText: '请输入用户名', 83 maxLengthText: '用户名不能超过20个字符' 84 }); 85 //密码input 86 var txtpassword = new Ext.form.TextField({ 87 width: 140, 88 allowBlank: false, 89 maxLength: 20, 90 inputType: 'password', 91 name: 'password', 92 fieldLabel: '密码', 93 blankText: '请输入密码', 94 maxLengthText: '密码不能超过20个字符' 95 }); 96 //----------------------数字字段开始----------------------// 97 var numberfield = new Ext.form.NumberField({ 98 fieldLabel: '身高', 99 width: 80, 100 decimalPrecision: 1, 101 minValue: 0.01, 102 maxValue: 200, 103 unitText: ' cm', 104 allowBlank: false, 105 blankText: '请输入身高' 106 }); 107 //----------------------数字字段结束----------------------// 108 //----------------------隐藏域字段开始----------------------// 109 var hiddenfield = new Ext.form.Hidden({ 110 name: 'userid', 111 value: '1' 112 }); 113 //----------------------隐藏域字段结束----------------------// 114 //----------------------日期字段开始----------------------// 115 var datefield = new Ext.form.DateField({ 116 fieldLabel: '出生日期', 117 format: 'Y-m-d', 118 editable: false, 119 allowBlank: false, 120 blankText: '请选择日期' 121 }); 122 //----------------------日期字段结束----------------------// 123 //表单 124 var form = new Ext.form.FormPanel({ 125 frame: true, 126 title: '表单标题', 127 style: 'margin:10px', 128 html: '<div style="padding:10px">这里表单内容</div>', 129 items: [txtusername, txtpassword, numberfield, hiddenfield, datefield], 130 buttons: [btnsubmit, btnreset] 131 }); 132 //窗体 133 var win = new Ext.Window({ 134 title: '窗口', 135 width: 476, 136 height: 374, 137 html: '<div>这里是窗体内容</div>', 138 resizable: true, 139 modal: true, 140 closable: true, 141 maximizable: true, 142 minimizable: true, 143 buttonAlign: 'center', 144 items: form 145 }); 146 win.show(); 147 }); 148 </script> 149 </head> 150 <body> 151 <!-- 152 说明： 153 (1)var numberfield = new Ext.form.NumberField():创建一个新的NumberField数字文本框对象。 154 (2)99行，decimalPrecision: 1：设置小数点后面的位数，当位数超过时系统会自动截断。 155 (3)100行，minValue: 0.01：设置数字文本框最小值。 156 (4)101行，maxValue: 200:设置最大值。 157 (5)102行，unitText: ' cm'：注意，这个属性并非 Extjs文本框自带的属性，因为我们要在“身高”的后面加上 158 单位，所以在23行---43行对文本框进行了重写，重写时添加了属性"unitText"，并且在样式表中加了样式"x-form-unit"。 159 (6)var hiddenfield = new Ext.form.Hidden()：创建一个新的Hidden对象，隐藏字段用作参数占位符， 160 一般用来保存一些不希望用户直接看到的参数，并发送到服务器，例如：用户ID等。 161 (7)109行，name: 'userid'：Hidden对象的名称，这个名称是在服务端接收值的名称。发送参数格式如下：userid:1。 162 (8)110行，value: '1'：发送的值。 163 (9)var datefield = new Ext.form.DateField()：创建一个新的Datefield日期对象,Extjs的日期为英文类型，
所以要加入翻译成中文的js，代码第8行位置。 164 (10)116行，format: 'Y-m-d'：日期格式。 165 (11)117行，editable: false：设置为不可编辑。 166 --> 167 </body> 168 </html>
2.效果如下：
![无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]_第1张图片](http://img.e-com-net.com/image/product/69a06038626e4346a76f060bb53a04c9.jpg)