本章介绍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>

Ext文本输入框:Ext.form.TextField属性汇总(转) (的更多相关文章

  1. 8. Ext文本输入框:Ext.form.TextField属性汇总

    转自:https://blog.csdn.net/ryuudenne/article/details/8834650 Ext.form.TextField主要配置表: allowBlank       ...

  2. 86. Ext文本输入框:Ext.form.TextField属性汇总

    转自:https://blog.csdn.net/ryuudenne/article/details/8834650 Ext.form.TextField主要配置表: allowBlank       ...

  3. 49.Ext.form.TextField()基本用法

    转自:https://blog.csdn.net/toudoulin/article/details/6719163 var textfieldName = new Ext.form.TextFiel ...

  4. Flutter TextField 文本输入框的基本属性及详解

    TextField 文本输入框 源码分析: const TextField({ Key key, this.controller, // 控制正在编辑文本 this.focusNode, // 获取键 ...

  5. ext3中xtype属性汇总

    基本组件: xtype Class 描述 button Ext.Button 按钮 splitbutton Ext.SplitButton 带下拉菜单的按钮 cycle Ext.CycleButton ...

  6. Extjs-工具条和菜单 Ext.menu和Ext.Toolbar

    转载自:http://blog.csdn.net/itlwc/article/details/7878002 1.创建一个简单工具条效果图 <script type="text/jav ...

  7. 【转载】Ext中关于Ext.QuickTips.init()的使用

    免责声明:     本文转自网络文章,转载此文章仅为个人收藏,分享知识,如有侵权,请联系博主进行删除.     原文作者:然嗄      原文地址:http://www.cnblogs.com/jia ...

  8. Ext JS学习第十三天 Ext基础之 Ext.Element

    •Ext.Element提供了181个方法,嗯,还没完,只是在4.1版本中是这样,最新的4.2版本貌似又增加了新方法,可谓是相当丰富给力.那么根据操作类型基本可以分为查询系.DOM操作系.样式操作系. ...

  9. Ext中关于Ext.QuickTips.init()的使用

    在extJS的例子中,大部分都在程序第一行使用了如下语句:Ext.QuickTips.init();但是QuickTips的用处是什么呢?我们看一段最简单的代码: <html> <h ...

随机推荐

  1. KM bfs写法

    KM bfs写法 2018astar资格赛的第三题整数规划. 把\(x, y\)看成二分图两边的顶标,\(a_{ij}\)就是二分图的边权,整道题其实就是求二分图的最大权匹配. 然后打了个\(dfs\ ...

  2. Caused by: android.content.res.Resources$NotFoundException: Resource ID #0x7f070058 android-studio 3.0 from canary 5 to canary 6

    我升级android-studio到了3.0 canary 6打包编译安装出现如下错误: 07-11 13:00:39.523 8913-8913/dcpl.com.myapplication E/A ...

  3. Linux删除除了今天以外的文件

    [背景] 开发到日志记录功能时,每天都会产生当天的一个日志,久而久之就会产生累积,想要查看的时候,tab键无法自动补全,还要自己额外输入. 比较麻烦. [命令] 经过查找和实验,找到了以下的方法: 1 ...

  4. Springboot swagger2 导出api文档

    具体导出的代码,参考了:http://www.spring4all.com/article/699 导出前,首先需要配置好swagger2,参见 https://www.cnblogs.com/yan ...

  5. group by的运用

    select a.* from zeai_photo a inner join (select max(id) mid,userid from zeai_photo group by userid) ...

  6. PHP 面向对象 final类与final方法

    final---用于类.方法前. final类---不可被继承. final方法---不可被覆盖. final类不能被继承. 如果我们不希望一个类被继承,我们使用final来修饰这个类.这个类将无法被 ...

  7. javascript初步了解

    0.1   <script> 和 </script> 会告诉 JavaScript 在何处开始和结束. <script> 和 </script> 之间的 ...

  8. curd 插件

    1. Django项目启动 自动加载文件 制作启动文件 . 注册strak 在apps.py 类里面增加如下 def ready(self): from django.utils.module_loa ...

  9. yii2 DateTimePicker显示到天

    扩展是 kartik\datetime\DateTimePicker; 关键是加入此配置  'minView'=> "month",示例如下: <?php echo D ...

  10. python开发学习-day07(面向对象之多态、类的方法、反射、新式类and旧式类、socket编程)

    s12-20160227-day07 *:first-child { margin-top: 0 !important; } body>*:last-child { margin-bottom: ...