输入框TextField
一个基本文本框表单项。可以直接代替传统文本输入框, 或者作为许多复杂基本控件的基类({如@link Ext.form.field.TextArea}) 和Ext.form.field.ComboBox)。支持空表单项占位符(参见emptyText)。
1、示例：
在FormPanel表单中添加两个输入框
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" /> <script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script> <script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script> <script type="text/javascript"> Ext.onReady(function() { //初始化标签中的Ext:Qtip属性 Ext.QuickTips.init(); Ext.form.Field.prototype.msgTarget = 'under'; //用户名input var txtusername = new Ext.form.TextField({ width : 240, allowBlank : false, maxLength : 20, name : 'username', fieldLabel : '用户名称', blankText : '请输入用户名', maxLengthText : '用户名输入不能超过20个字符' }); //密码input var txtpwd = new Ext.form.TextField({ width : 240, allowBlank : false, maxLength : 20, name : 'password', inputType : 'password', fieldLabel : '密码', blankText : '请输入密码', maxLengthText : '密码输入不能超过20个字符' }); var form = new Ext.form.FormPanel({ frame : true, title : '表单标题', style : 'margin:10px', // draggable : true, //可拖拽 html : '<div style ="padding:10px">这里是表单内容</div>', items : [txtusername,txtpwd] }); var win = new Ext.Window({ title : '窗体window', width : 500, height : 200, draggable : true, html : '<div>这里是窗体的内容</div>', resizable : true, modal : true, closable : true, maximizable : true, minimizable : true, items : form }); win.show(); }); </script> </head> <body> <!-- 说明： (1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。 (2)Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)， side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。 (3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。 (4)allowBlank: false：不允许文本框为空。 (5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。 (6)name: 'password'：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。 (7)fieldLabel: '用户名'：文本框前面显示的文字标题，如“用户名”，“密码”等。 (8)blankText: '请输入用户名'：当非空校验没有通过时的提示信息。 (9) maxLengthText: '用户不能超过20个字符'：当最大长度校验没有通过时的提示信息。 --> </body> </html>
2、效果图：
3、常用属性及方法：
（1）属性：
allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息
（2）方法：