朋友炒股兩個月賺了10萬，我幫他推廣一下公眾號，把錢用來投資總比放銀行連通貨膨脹都跑不過里強， 硬核離職，在家炒股 ，這是他每天的日志，有些經驗是花錢也買不到的。
繼上一節內容，我們在表單里加了個兩個文本框。如下所示代碼區的第42行位置，items: [txtusername, txtpassword]。
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 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 9 <!--ExtJs框架結束--> 10 <script type="text/javascript"> 11 Ext.onReady(function () { 12 //初始化標簽中的Ext:Qtip屬性。 13 Ext.QuickTips.init(); 14 Ext.form.Field.prototype.msgTarget = 'side'; 15 //用戶名input 16 var txtusername = new Ext.form.TextField({ 17 width: 140, 18 allowBlank: false, 19 maxLength: 20, 20 name: 'username', 21 fieldLabel: '用戶名稱', 22 blankText: '請輸入用戶名', 23 maxLengthText: '用戶名不能超過20個字符' 24 }); 25 //密碼input 26 var txtpassword = new Ext.form.TextField({ 27 width: 140, 28 allowBlank: false, 29 maxLength: 20, 30 inputType: 'password', 31 name: 'password', 32 fieldLabel: '密碼', 33 blankText: '請輸入密碼', 34 maxLengthText: '密碼不能超過20個字符' 35 }); 36 //表單 37 var form = new Ext.form.FormPanel({ 38 frame: true, 39 title: '表單標題', 40 style: 'margin:10px', 41 html: '<div style="padding:10px">這里表單內容</div>', 42 items: [txtusername, txtpassword] 43 }); 44 //窗體 45 var win = new Ext.Window({ 46 title: '窗口', 47 width: 476, 48 height: 374, 49 html: '<div>這里是窗體內容</div>', 50 resizable: true, 51 modal: true, 52 closable: true, 53 maximizable: true, 54 minimizable: true, 55 items: form 56 }); 57 win.show(); 58 }); 59 </script> 60 </head> 61 <body> 62 <!-- 63 說明： 64 (1)Ext.QuickTips.init()：QuickTips的作用是初始化標簽中的Ext:Qtip屬性，並為它賦予顯示提示的動作。 65 (2)Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式為：在右邊緣，如上圖所示，參數枚舉值為"qtip","title","under","side",id(元素id)， 66 side方式用的較多，右邊出現紅色感嘆號，鼠標上去出現錯誤提示。 67 (3)var txtusername = new Ext.form.TextField():創建一個新的TextField文本框對象。 68 (4)allowBlank: false：不允許文本框為空。 69 (5)maxLength: 20：文本框的最大長度為20個字符，當超過20個字符時仍然可以繼續輸入，但是Ext會提示警告信息。 70 (6)name: 'password'：表單名稱，這個比較重要，因為我們在與服務器交互的時候，服務端是按name接收post的參數值。 71 (7)fieldLabel: '用戶名'：文本框前面顯示的文字標題，如“用戶名”，“密碼”等。 72 (8)blankText: '請輸入用戶名'：當非空校驗沒有通過時的提示信息。 73 (9) maxLengthText: '用戶不能超過20個字符'：當最大長度校驗沒有通過時的提示信息。 74 --> 75 </body> 76 </html>
2.效果如下：
3.textfield組件常用的：屬性、方法及事件
一、屬性
allowBlank：是否允許為空，默認為true
blankText：空驗證失敗后顯示的提示信息
emptyText：在一個空字段中默認顯示的信息
grow：字段是否自動伸展和收縮，默認為false
growMin：收縮的最小寬度
growMax：伸展的最大寬度
inputType：字段類型：默認為text
maskRe：用於過濾不匹配字符輸入的正則表達式
maxLength：字段允許輸入的最大長度
maxLengthText：最大長度驗證失敗后顯示的提示信息
minLength：字段允許輸入的最小長度
minLengthText：最小長度驗證失敗后顯示的提示信息