继上一节内容，我们在表单里加了个两个文本框。如下所示代码区的第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 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 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 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：最小长度验证失败后显示的提示信息