Ext.form.TextField最简单用法和Ext.form.TextField属性汇总
var textfieldName = new Ext.form.TextField
({
id:"textfieldName",
allowBlank:false,//默认是true,如果是false,就是不允许空
//假如不为空时，定义提示信息默认的提示信息是：This field is required
//要使提示内容出现，需要添加 Ext.QuickTips.init();
blankText:"请输入数据",
disabled:false,//默认是false
emptyText:"请正确输入数据",//默认是null
fieldLabel:"用户名称",//默认是""
height:"auto",//默认是auto
hidden:false,//默认是false
hideLabel:false,//默认是false
hideMode:"offsets",//默认display,可以取值：display，offsets，visibility
inputType:"text",//输入类型 这个很重要，可以是radio, text, password, file 默认是text
invalidText:"invalidText：只能够输入数字",//默认是：The value in this field is invalid
maxLength:100,//能够输入的内容的最大长度
maxLengthText:"输入内容太长了",//超出最大长度的设置信息
minLength:2,//能够输入的内容的最小长度
maxLengthText:"输入内容太短了",//没有达到最小长度的设置信息
readOnly:false,//内容是否只读，默认false
regex:/^\d$/, //正则表达式这里假设只允许输入数字如果输入的不是数字就会出现下面定义的提示信息
regexText:"regexText：只能够输入数字", //定义不符合正则表达式的提示信息
validateOnBlur:true,//默认是true,失去焦点时验证
validationDelay:300,//默认是250,验证延迟时间,毫秒数
validationEvent:"click", //验证事件默认是keyup可以是String/Boolean
//自定义的验证函数当输入的数据不符合正则表达式的要求时，就会执行这个函数
validator:function(){Ext.Msg.alert("提示信息","只能够输入数字");},
value:"",//自定义的信息默认是：undefined
//x:number,y:number,在容器中的x,y坐标
width:"auto",//默认是auto
renderTo:"Bind_TextField"
Ext.form.TextField主要配置表:
allowBlank Boolean 是否允许为空(默认true)
blankText String 为空验证失败提示信息
emptyText String 空字段中默认显示信息
grow Boolean 设置字段是否根据内容伸缩(默认false)
growMax Number 字段伸展的最大宽度(默认800)
growMin Number 字段收缩最小宽度(默认30)
inputType String 字段类型(默认text)
maxLength Number 字段允许输入最大长度
masLengthText String 最大长度验证失败提示信息
minLength Number 字段允许输入最小长度
minLenghtText String 最小长度验证失败提示信息
regex String javascript正则表达式
regexText String 正则表达式验证失败提示信息
selectOnFocus Boolean 设置当前字段得到焦点是否自动选择已存在文本(默认false)
vtype String 验证类型名字
vtypeText String 自定义提示信息，代替vtype本身的错误提示信息
validator Function 在所有基本验证通过后调用(默认null)
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '../extjs2.0/resources/images/default/s.gif';
//初始化信息提示功能
Ext.QuickTips.init();
//统一指定错误信息提示浮动显示方式
Ext.form.Field.prototype.msgTarget = 'side';
var config = {
title:'Ext.form.TextField例', //表单标题
labelSeparator:':', //表单label与其他元素分割符
labelWidth:60, //标签宽
labelAlign:'right', //标签对齐方式
bodyStyle:'padding:5 5 5 5', //表单边距
frame:true, //是否渲染表单
height:120, //表单高
width:250, //表单宽
renderTo:'form', //表单定位
//表单子元素数组
items:[
new Ext.form.TextField({
fieldLabel:'用户名',
id:'userName',
selectOnFocus:true, //得到焦点自动选择文本
allowBlank:false, //不允许为空
blankText:'用户名不可为空', //空验证失败错误提示信息
//javascript邮件验证正则表达式
regex:/^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,
regexText:'用户格式错误' //javascript正则表达式验证失败错误信息提示
}),
new Ext.form.TextField({
fieldLabel:'密码',
inputType:'password', //设置输入类型为password
allowBlank:false,
blankText:'密码不可为空'
})
]
}
var form = new Ext.form.FormPanel(config);
});
