extjs技术交流,欢迎加群(201926085)

继上一节内容,我们在表单里加了个两个文本框。如下所示代码区的第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]的更多相关文章

  1. 无废话ExtJs 入门教程十五[员工信息表Demo:AddUser]

    无废话ExtJs 入门教程十五[员工信息表Demo:AddUser] extjs技术交流,欢迎加群(201926085) 前面我们共介绍过10种表单组件,这些组件是我们在开发过程中最经常用到的,所以一 ...

  2. 无废话ExtJs 入门教程十四[文本编辑器:Editor]

    无废话ExtJs 入门教程十四[文本编辑器:Editor] extjs技术交流,欢迎加群(201926085) ExtJs自带的编辑器没有图片上传的功能,大部分时候能够满足我们的需要. 但有时候这个功 ...

  3. 无废话ExtJs 入门教程二十一[继承:Extend]

    无废话ExtJs 入门教程二十一[继承:Extend] extjs技术交流,欢迎加群(201926085) 在开发中,我们在使用视图组件时,经常要设置宽度,高度,标题等属性.而这些属性可以通过“继承” ...

  4. 无废话ExtJs 入门教程十一[下拉列表:Combobox]

    无废话ExtJs 入门教程十一[下拉列表:Combobox] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个下拉列表: 1.代码如下: 1 <!DOCT ...

  5. 无废话ExtJs 入门教程十[单选组:RadioGroup、复选组:CheckBoxGroup]

    无废话ExtJs 入门教程十[单选组:RadioGroup.复选组:CheckBoxGroup] extjs技术交流,欢迎加群(201926085) 继上一节内容,我们在表单里加了个一个单选组,一个复 ...

  6. 无废话ExtJs 入门教程九[数字字段:NumberField、隐藏字段Hidden、日期字段:DataFiedl]

    无废话ExtJs 入门教程九[数字字段:NumberField.隐藏字段Hidden.日期字段:DataFiedl] extjs技术交流,欢迎加群(201926085) 继上第六节内容,我们在表单里加 ...

  7. 无废话ExtJs 入门教程十九[API的使用]

    无废话ExtJs 入门教程十九[API的使用] extjs技术交流,欢迎加群(201926085) 首先解释什么是 API 来自百度百科的官方解释:API(Application Programmin ...

  8. 无废话ExtJs 入门教程十七[列表:GridPanel]

    无废话ExtJs 入门教程十七[列表:GridPanel] extjs技术交流,欢迎加群(201926085) 在Extjs中,GridPanel用于数据显示,即我们平时说的列表页.在本节中,我们先对 ...

  9. 无废话ExtJs 入门教程十三[上传图片:File]

    无废话ExtJs 入门教程十三[上传图片:File] extjs技术交流,欢迎加群(201926085) 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C ...

随机推荐

  1. mysql‘事件计划已关闭。事件只能在服务器启动并开启事件计划时才能处理。&#39;的警告

    通过下列语句查询event是否开启 show variables like '%sche%'; 通过执行下列语句,来开启event_schedulerset global event_schedule ...

  2. [Android Tips] 21. Regex Named Groups in Android

    Android SDK 并没有包含 Java 7 新增加的命名捕获组功能,需要使用第三方库 https://github.com/tony19/named-regexp import com.goog ...

  3. Leetcode 367. Valid Perfect Square

    Given a positive integer num, write a function which returns True if num is a perfect square else Fa ...

  4. jQuery获取cookie

    之前一直以为获取cookie的方法封装在了jQuery包中...没想到还得单独下jquery.cookie.js插件,不太好找,备份一份: /*! * jQuery Cookie Plugin v1. ...

  5. Div中高度自适应增长方法

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. USACO2011Brownie Slicing巧克力蛋糕切片

    Description     Bessie烘焙了一块巧克力蛋糕.这块蛋糕是由R*C(1 <= R,C <= 500)个小的巧克力蛋糕组成的. 第i行,第j列的蛋糕有N_ij(1 < ...

  7. 一头扎进EasyUI2

    惯例广告一发,对于初学真,真的很有用www.java1234.com,去试试吧! 一头扎进EasyUI第6讲 .日历组件 <div class="easyui-calendar&quo ...

  8. 为wordpress添加Canonical标签

    在 WordPress 2.9 之前,让 WordPress 博客支持 Canonical 标签是需要通过插件或者手工修改主题的 header.php 文件来实现.如在主题中加如下的代码: <? ...

  9. convert jar to java

    (文章是从我的个人主页上粘贴过来的,大家也可以访问我的主页 www.iwangzheng.com) 首先解压一下下载的jar文件,extract jar file , $jar -xvf file.j ...

  10. MWC飞控增加声纳定高的方法

    MWC飞控增加声纳定高的方法 2015.12.17 更新:经过2个周末的上机测试,该算法效果很好,在低空超声锁高之后离地高度非常稳定,现在已经成功应用在低空航拍上了. 现状 MWC开源飞控已经很有点年 ...