Fork me on GitHub

ExtJs学习笔记之TextField

输入框TextField

一个基本文本框表单项。可以直接代替传统文本输入框, 或者作为许多复杂基本控件的基类({如@link Ext.form.field.TextArea}) 和Ext.form.field.ComboBox)。支持空表单项占位符(参见emptyText)。

1、示例：

　　在FormPanel表单中添加两个输入框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../ext-js-4.2.1/resources/css/ext-all.css" />
<script type="text/javascript" src="../ext-js-4.2.1/ext-all.js"></script>
<script type="text/javascript" src="../ext-js-4.2.1/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
    Ext.onReady(function() {  
          //初始化标签中的Ext:Qtip属性
          Ext.QuickTips.init();
          Ext.form.Field.prototype.msgTarget = 'under';
          //用户名input
          var txtusername = new Ext.form.TextField({
             width : 240,
             allowBlank : false,
             maxLength : 20,
             name : 'username',
             fieldLabel : '用户名称',
             blankText : '请输入用户名',
             maxLengthText : '用户名输入不能超过20个字符'
          });
          //密码input
          var txtpwd = new Ext.form.TextField({
             width : 240,
             allowBlank : false,
             maxLength : 20,
             name : 'password',
             inputType : 'password',
             fieldLabel : '密码',
             blankText : '请输入密码',
             maxLengthText : '密码输入不能超过20个字符'
          });
        
        var form = new Ext.form.FormPanel({
            frame : true,
            title : '表单标题',
            style : 'margin:10px',
//             draggable : true,        //可拖拽
            html : '<div style ="padding:10px">这里是表单内容</div>',
            items : [txtusername,txtpwd]
        });
        
        var win = new Ext.Window({
            title : '窗体window',
            width : 500,
            height : 200,
            draggable : true,
            html : '<div>这里是窗体的内容</div>',
            resizable : true,
            modal : true,
            closable : true,
            maximizable : true,
            minimizable : true,
            items : form
        });
        win.show();
        });  
</script>
</head>
<body>
   <!--
     说明：
     (1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
     (2)Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，
        side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
     (3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
     (4)allowBlank: false：不允许文本框为空。
     (5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
     (6)name: 'password'：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
     (7)fieldLabel: '用户名'：文本框前面显示的文字标题，如“用户名”，“密码”等。
     (8)blankText: '请输入用户名'：当非空校验没有通过时的提示信息。
     (9) maxLengthText: '用户不能超过20个字符'：当最大长度校验没有通过时的提示信息。
 -->
</body>
</html>

2、效果图：

3、常用属性及方法：

（1）属性：

　　allowBlank：是否允许为空，默认为true
　　blankText：空验证失败后显示的提示信息
　　emptyText：在一个空字段中默认显示的信息
　　grow：字段是否自动伸展和收缩，默认为false
　　growMin：收缩的最小宽度
　　growMax：伸展的最大宽度
　　inputType：字段类型：默认为text
　　maskRe：用于过滤不匹配字符输入的正则表达式
　　maxLength：字段允许输入的最大长度
　　maxLengthText：最大长度验证失败后显示的提示信息
　　minLength：字段允许输入的最小长度
　　minLengthText：最小长度验证失败后显示的提示信息

（2）方法：　

( ) : 返回该表单项的值当前是否可用。 注意：disabled 表单项是一直被当作可用的。如果值是可用的则返回True，返之反回false.
( [Boolean deep] ) :组件是否可见，可见返回为true。

posted on 2015-05-05 16:27  骑着乌龟漫步  阅读(1510)  评论(0)  编辑  收藏  举报

导航