ExtJs 入门教程五[文本框：TextField]

一、效果

二、代码

//初始化标签中的Ext:Qtip属性。
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
//用户名input
var txtusername = new Ext.form.TextField({
	width: 140,
        allowBlank: false,
        maxLength: 20,
        name: 'username',
        fieldLabel: '用户名称',
	regex: /^[\u4e00-\u9fa5]*$/,
	regexText:"只能输入中文", 
});

blankText: '请输入用户名', maxLengthText: '用户名不能超过20个字符' }); //密码input var txtpassword = new Ext.form.TextField({ width: 140, allowBlank: false, maxLength: 20, inputType: 'password', name: 'password', fieldLabel: '密码', blankText: '请输入密码', maxLengthText: '密码不能超过20个字符' }); //表单 var form = new Ext.form.FormPanel({ frame: true, title: '表单标题', style: 'margin:10px', html: '<div style="padding:10px">这里表单内容</div>', items: [txtusername, txtpassword] }); //窗体 var win = new Ext.Window({ title: '窗口', width: 476, height: 374, html: '<div>这里是窗体内容</div>', resizable: true, modal: true, closable: true, maximizable: true, minimizable: true, items: form }); win.show(); }); </script>

三、说明

（1）Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。

（2）Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。

（3）allowBlank: false：不允许文本框为空。

（4）maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。

（5）blankText: '请输入用户名'：当非空校验没有通过时的提示信息。

（6）maxLengthText: '用户不能超过20个字符'：当最大长度校验没有通过时的提示信息。

四、textfield组件常用的：属性、方法及事件

1、属性

          allowBlank：是否允许为空，默认为true

blankText：空验证失败后显示的提示信息

emptyText：在一个空字段中默认显示的信息

grow：字段是否自动伸展和收缩，默认为false

growMin：收缩的最小宽度

growMax：伸展的最大宽度

inputType：字段类型：默认为text

maskRe：用于过滤不匹配字符输入的正则表达式

maxLength：字段允许输入的最大长度

maxLengthText：最大长度验证失败后显示的提示信息

minLength：字段允许输入的最小长度

minLengthText：最小长度验证失败后显示的提示信息

五、补充

（1）labelStyle：控制TestField文本框的样式