无废话ExtJs 入门教程五[文本框：TextField]
继上一节内容，我们在表单里加了个两个文本框。如下所示代码区的第42行位置，items: [txtusername, txtpassword]。
1.代码如下：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <title></title>
5 <!--ExtJs框架开始-->
6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
9 <!--ExtJs框架结束-->
10 <script type="text/javascript">
11 Ext.onReady(function () {
12 //初始化标签中的Ext:Qtip属性。
13 Ext.QuickTips.init();
14 Ext.form.Field.prototype.msgTarget = 'side';
15 //用户名input
16 var txtusername = new Ext.form.TextField({
17 width: 140,
18 allowBlank: false,
19 maxLength: 20,
20 name: 'username',
21 fieldLabel: '用户名称',
22 blankText: '请输入用户名',
23 maxLengthText: '用户名不能超过20个字符'
24 });
25 //密码input
26 var txtpassword = new Ext.form.TextField({
27 width: 140,
28 allowBlank: false,
29 maxLength: 20,
30 inputType: 'password',
31 name: 'password',
32 fieldLabel: '密码',
33 blankText: '请输入密码',
34 maxLengthText: '密码不能超过20个字符'
35 });
36 //表单
37 var form = new Ext.form.FormPanel({
38 frame: true,
39 title: '表单标题',
40 style: 'margin:10px',
41 html: '<div style="padding:10px">这里表单内容</div>',
42 items: [txtusername, txtpassword]
43 });
44 //窗体
45 var win = new Ext.Window({
46 title: '窗口',
47 width: 476,
48 height: 374,
49 html: '<div>这里是窗体内容</div>',
50 resizable: true,
51 modal: true,
52 closable: true,
53 maximizable: true,
54 minimizable: true,
55 items: form
56 });
57 win.show();
58 });
59 </script>
60 </head>
61 <body>
62 <!--
63 说明：
64 (1)Ext.QuickTips.init()：QuickTips的作用是初始化标签中的Ext:Qtip属性，并为它赋予显示提示的动作。
65 (2)Ext.form.Field.prototype.msgTarget = 'side'：TextField的提示方式为：在右边缘，如上图所示，参数枚举值为"qtip","title","under","side",id(元素id)，
66 side方式用的较多，右边出现红色感叹号，鼠标上去出现错误提示。
67 (3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
68 (4)allowBlank: false：不允许文本框为空。
69 (5)maxLength: 20：文本框的最大长度为20个字符，当超过20个字符时仍然可以继续输入，但是Ext会提示警告信息。
70 (6)name: 'password'：表单名称，这个比较重要，因为我们在与服务器交互的时候，服务端是按name接收post的参数值。
71 (7)fieldLabel: '用户名'：文本框前面显示的文字标题，如“用户名”，“密码”等。
72 (8)blankText: '请输入用户名'：当非空校验没有通过时的提示信息。
73 (9) maxLengthText: '用户不能超过20个字符'：当最大长度校验没有通过时的提示信息。
74 -->
75 </body>
76 </html>
2.效果如下：
3.textfield组件常用的：属性、方法及事件
一、属性
allowBlank：是否允许为空，默认为true
blankText：空验证失败后显示的提示信息
emptyText：在一个空字段中默认显示的信息
grow：字段是否自动伸展和收缩，默认为false
growMin：收缩的最小宽度
growMax：伸展的最大宽度
inputType：字段类型：默认为text
maskRe：用于过滤不匹配字符输入的正则表达式
maxLength：字段允许输入的最大长度
maxLengthText：最大长度验证失败后显示的提示信息
minLength：字段允许输入的最小长度
minLengthText：最小长度验证失败后显示的提示信息
无废话ExtJs 入门教程五[文本框：TextField]的更多相关文章
- 无废话ExtJs 入门教程十五[员工信息表Demo：AddUser]
无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...
- 无废话ExtJs 入门教程十四[文本编辑器：Editor]
无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...
- 无废话ExtJs 入门教程二十一[继承：Extend]
无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...
- 无废话ExtJs 入门教程十一[下拉列表：Combobox]
无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...
- 无废话ExtJs 入门教程十[单选组：RadioGroup、复选组：CheckBoxGroup]
无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...
- 无废话ExtJs 入门教程九[数字字段：NumberField、隐藏字段Hidden、日期字段：DataFiedl]
无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...
- 无废话ExtJs 入门教程十九[API的使用]
无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...
- 无废话ExtJs 入门教程十七[列表：GridPanel]
无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...
- 无废话ExtJs 入门教程十三[上传图片：File]
无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...
随机推荐
- Tomcat启动服务报错：Unknown version string [3.1]. Default version will be used.
用Intellij IDEA 部署Web项目,Tomcat启动后报错Unknown version string [3.1]. Default version will be used. 作者的问题出 ...
- Oracle 11g 下载|Oracle 11g 官网下载|Oracle 11g 官网下载 带登录用户和密码
本文转载自 Oracle 11g 下载|Oracle 11g 官网下载|Oracle 11g 官网下载 带登录用户和密码 oracle 下载还需要用户名我自己注册了个方便大家使用下载直接点击提示找不到 ...
- Appium根据xpath获取控件
如文章< Appium基于安卓的各种FindElement的控件定位方法实践>所述,Appium拥有众多获取控件的方法.其中一种就是根据控件所在页面的XPATH来定位控件. 本文就是尝试通 ...
- sprinvMVC路径拦截
关于这种路径的拦截: http://localhost:8080/moodleCourse-tool/scorm/23681/mod_scorm/content/1/index_SCORM.html ...
- WCF错误：413 Request Entity Too Large
在我们用WCF传输数据的时候,如果启用默认配置,传输的数据量过大,经常会出这个错误. WCF包含服务端与客户端,所以这个错误可能出现在服务端返回数据给客户端,或客户端传数据给服务端时. 1. 服务端返 ...
- 【编程题目】输入两个整数 n 和 m,从数列 1,2,3.......n 中 随意取几个数, 使其和等于 m ... ★
第 21 题(数组)2010 年中兴面试题编程求解:输入两个整数 n 和 m,从数列 1,2,3.......n 中 随意取几个数,使其和等于 m ,要求将其中所有的可能组合列出来. 我的思路: 从小 ...
- POJ 1222 EXTENDED LIGHTS OUT (高斯消元)
题目链接 题意:5*6矩阵中有30个灯,操作一个灯,周围的上下左右四个灯会发生相应变化 即由灭变亮,由亮变灭,如何操作使灯全灭? 题解:这个问题是很经典的高斯消元问题.同一个按钮最多只能被按一次,因为 ...
- window.parent 与 window.opener
window.parent针对iframe,window.opener针对window.open 父页面parent.jsp: <%@ page language="java" ...
- GoF23种设计模式
创建型模式 1.ABSTRACT FACTORY-追MM少不了请吃饭了,麦当劳的套餐和肯德基的套餐都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说"两个B ...
- tableView滚到最后一行
dispatch_async(dispatch_get_main_queue(), ^{ [_tableview scrollToRowAtIndexPath:[NSIndexPath indexPa ...