直接上demo,详细的信息可以参考这个博客
http://www.cnblogs.com/mogen_yin/archive/2008/10/30/1323145.html
/** * TextField */ Ext.QuickTips.init(); 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,//能够输入的内容的最小长度 minLengthText : "输入内容太短了",//没有达到最小长度的设置信息 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 : Ext.getBody() });
效果如图:
总结一下,textfiled是个很简单的组件,连extdemo中都没有单独的例子。主要还是熟悉属性和方法。另外注意其type可以用来实现radio,file,password不同的效果。