朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
繼上第六節內容，我們在表單里加了個一個數字字段，隱藏字段，日期字段。如下代碼所:
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.效果如下：
