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）方法：
ExtJs学习笔记之TextField的更多相关文章
- Extjs 学习笔记1
学习笔记 目 录 1 ExtJs 4 1.1 常见错误处理 4 1.1.1 多个js文件中有相同的控件,切换时无法正常显示 4 1.1.2 Store的使用方法 4 1.1.3 gridPanel ...
- ExtJs学习笔记之学习小结LoginDemo
ExtJs学习小结LoginDemo 1.示例:(登录界面) <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- extjs 学习笔记（二）
EXTJS实用开发指南 1. 要使用ExtJS 框架的页面中一般包括下面几句: <link rel="stylesheet" type="text/css" ...
- EXTJS学习笔记
由于公司统一决策,决定使用EXTJS作为前台的开发UI框架,所以从今天开始学习EXTJS,对学习过程中遇到的问题做记录. 首先第一个问题:为什么要用ExtJS作为公司开发基础架构? 推荐一篇文章: ...
- Extjs学习笔记之九 数据模型(上）-extjs
来源:niutuku.com | vincent上传于2012-07-20 | 1802次浏览 | 0条评论 本文开始进入Extjs最核心最优秀的部分. 标签:Extjs 数据模型 Extjs的数 ...
- [转]ExtJS学习笔记（二）：handler与listener的区别
原文地址:http://blog.csdn.net/smilingleo/article/details/3733177 ExtJS里handler和listener都是用来对用户的某些输入进行处理的 ...
- ExtJs学习笔记之Button组件
按钮Button组件 可以使用该组件的创建简单的按钮. 可以自定义属性包括 aligned icons, dropdown menus, tooltips 和 sizing options. 当出发点 ...
- ExtJS学习笔记：定义extjs类别
类的定义 Ext.define('Cookbook.Vehicle', { Manufacturer: 'Aston Martin', Model: 'Vanquish', getDetails: f ...
- ExtJS学习笔记2：响应事件、使用AJAX载入数据
响应事件: 1.设置一个html标记 <div id="my-div">Ext JS 4 Cookbook</div> 2.使用get函数获取此标记对象 v ...
随机推荐
- 如何在Apache中建立一个新端口
环境: Windows server 2008 R2, Apache, PHP5 步骤: 建立一个目录,里面放置一个index.php. 打开Apache\conf\httpd.conf 文件,做如下 ...
- SecureCRT相关
-------------------------------------------------- 如何解决SecureCRT汉字乱码的问题? 选择工具栏上的“选项”菜单在打开的下拉菜单中选择“会话 ...
- linux脚本编程技术---8
一.什么是脚本 脚本是一个包含一系列命令序列的可执行(777)文本文件.当运行这个脚本文件时,文件中包含的命令序列将得到自动执行. 二.脚本编程 #!/bin/sh 首行固定格式 #!表明该脚本的的解 ...
- 用自己的机器人和ubuntu PC实现通信和控制--26
原创博客:转载请表明出处:http://www.cnblogs.com/zxouxuewei/ 前提: 1.拥有一台能够采用手动或者自动移动的机器人移动平台. 2.在电机端需要安装高分辨率的霍尔编码器 ...
- POJ-3162 Walking Race (求树上两点之间最大距离)
题目大意:给一棵树,对于所有的点,找出距它最远点的距离,然后将这些距离排成一列,找出最长的一个区间满足:其中的最大值减去最小值不大于m. 题目分析:两次dfs找出距每个节点的最远距离,然后可以通过维护 ...
- 使用jquery插件实现图片延迟加载技术（懒加载）
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- 一些实用的JS
1.str.split(/\s+/) 这句是表示以和/\s+/匹配的字符串作为分界,分割字符串str 比如一个空格或者多个或者空格以及回车等 其中+表示一个或者多个 var a = "b- ...
- java多线程：并发包中ReentrantReadWriteLock读写锁的锁降级模板
写锁降级为读锁,但读锁不可升级或降级为写锁. 锁降级是为了让当前线程感知到数据的变化. //读写锁 private ReentrantReadWriteLock lock=new ReentrantR ...
- JSBinding + SharpKit / 生成JavaScript绑定
将 UnityEngine 的代码导出到 JavaScript.就可以在 JavaScript 中使用 Unity 的功能. 如何导出? 将需要导出的类添加到 JSBindingSetting.cla ...
- pgbouncer配置
DESCRIPTION pgbouncer is a PostgreSQL connection pooler. Any target application can be connected to ...