Ext.form.TextField组件的基本用法

最新推荐文章于 2025-06-17 11:47:55 发布

转载最新推荐文章于 2025-06-17 11:47:55 发布 · 2.6k 阅读

文章标签：

#extjs

编程语言同时被 2 个专栏收录

10 篇文章

订阅专栏

java-web

3 篇文章

订阅专栏

本文详细介绍Ext.form.TextField组件的基本用法及配置选项，包括如何设置必填项、输入提示、正则验证等功能，并提供了完整的JavaScript示例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文主要介绍Ext.form.TextField组件的基本用法:

<form id="form1" runat="server"> <div> <div id="Bind_TextField"></div> <br /> <div id="Bind_Button"></div> <script type="text/javascript">
//这里是把TextField很重要的属性列出来　实际在应用的时候不需要将每个属性都列出　也许只需要一个属性就够了。
function ready()
{
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,//能够输入的内容的最小长度

          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"

    });

    //TextField组件的方法和事件都比较简单，具体请查看Ext2.2官方文档，如果有不明白的地方在博客里提问解决
    //以上就是TextField组件的常用定义。
}
Ext.onReady(ready);
</script>
</div>
</form>