输入框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）方法：　

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

ExtJs学习笔记之TextField的更多相关文章

  1. Extjs 学习笔记1

    学习笔记 目   录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...

  2. ExtJs学习笔记之学习小结LoginDemo

    ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...

  3. extjs 学习笔记（二）

    EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...

  4. EXTJS学习笔记

    由于公司统一决策,决定使用EXTJS作为前台的开发UI框架,所以从今天开始学习EXTJS,对学习过程中遇到的问题做记录. 首先第一个问题:为什么要用ExtJS作为公司开发基础架构?   推荐一篇文章: ...

  5. Extjs学习笔记之九 数据模型(上）-extjs

    来源:niutuku.com | vincent上传于2012-07-20 | 1802次浏览 | 0条评论 本文开始进入Extjs最核心最优秀的部分. 标签:Extjs 数据模型   Extjs的数 ...

  6. [转]ExtJS学习笔记（二）：handler与listener的区别

    原文地址:http://blog.csdn.net/smilingleo/article/details/3733177 ExtJS里handler和listener都是用来对用户的某些输入进行处理的 ...

  7. ExtJs学习笔记之Button组件

    按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...

  8. ExtJS学习笔记：定义extjs类别

    类的定义 Ext.define('Cookbook.Vehicle', { Manufacturer: 'Aston Martin', Model: 'Vanquish', getDetails: f ...

  9. ExtJS学习笔记2：响应事件、使用AJAX载入数据

    响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 v ...

随机推荐

  1. Get Many Persimmon Trees_枚举&&二维树状数组

    Description Seiji Hayashi had been a professor of the Nisshinkan Samurai School in the domain of Aiz ...

  2. 一个比较完整的Inno Setup 安装脚本

    一个比较完整的Inno Setup 安装脚本,增加了对ini文件设置的功能,一个安装包常用的功能都具备了. [Setup] ; 注: AppId的值为单独标识该应用程序. ; 不要为其他安装程序使用相 ...

  3. iOS-XMPP客户端

    首先我们自己做一个的IOS客户端程序 先看一下我们完成的效果图 首先下载xmppframework这个框架 点ZIP下载 接下来,用Xcode新建一个工程 将以下这些文件拖入新建工程中 加入frame ...

  4. 机器学习技法-GBDT算法

    课程地址:https://class.coursera.org/ntumltwo-002/lecture 之前看过别人的竞赛视频,知道GBDT这个算法应用十分广泛.林在第八讲,简单的介绍了AdaBoo ...

  5. 七 JavaBean

    一 什么是 JavaBean? JavaBean 是一个遵循特定写法的Java类,它是基于 Java 的组件模型,由属性.方法和事件3部分组成. 二 JavaBean 的特点: 1. 这个Java类必 ...

  6. Spring3整合Hibernate4-我们到底能走多远系列（30）

    我们到底能走多远系列(30) 扯淡: 30篇啦!从2012-08-15开始的系列,东平西凑将近一年的时间也就这么几篇.目标的100篇,按这个速度也要再搞两年呢. 发博客果然不是件容易的事,怪不得更多的 ...

  7. CentOS下Web服务器环境搭建LNMP一键安装包

    CentOS下Web服务器环境搭建LNMP一键安装包 时间:2014-09-04 00:50来源:osyunwei.com 作者:osyunwei.com 举报 点击:3797次 最新版本:lnmp- ...

  8. C++ Primer : 第九章 : 顺序容器的定义、迭代器以及赋值与swap

    顺序容器属于C++ STL的一部分,也是非常重要的一部分. 顺序容器包括: std::vector,包含在头文件<vector>中 std::string, 包含在头文件<strin ...

  9. leetcode 100 Same Tree ----- java

    Given two binary trees, write a function to check if they are equal or not. Two binary trees are con ...

  10. UVa 272 Tex Quotes --- 水题

    题目大意:在TeX中,左引号是 ``,右引号是 ''.输入一篇包含双引号的文章,你的任务是把他转成TeX的格式 解题思路:水题,定义一个变量标记是左引号还是右引号即可 /* UVa 272 Tex Q ...