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、效果图:

ExtJs学习笔记之TextField

3、常用属性及方法:

(1)属性:

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

(2)方法: 

[Boolean deep] ) :组件是否可见,可见返回为true。

你可能感兴趣的:(textfield)