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. Kali Linux渗透基础知识整理（二）漏洞扫描

    Kali Linux渗透基础知识整理系列文章回顾 漏洞扫描 网络流量 Nmap Hping3 Nessus whatweb DirBuster joomscan WPScan 网络流量 网络流量就是网 ...

  2. BZOJ 1024: [SCOI2009]生日快乐

    Description 将一个 \(x\times y\) 的矩形分成 \(n\) 块,让最长边:最短边 最小. Sol 搜索. \(n\) 只有 \(10\) 写一个类似于记搜的东西就好了. Cod ...

  3. 1.Express入门

    Express提供了轻量级框架,把Node.js的http模块功能封装在接口中. 也扩展了http模块功能,处理服务器路由,响应,cookie和HTTP请求的状态. 实现Express充当服务器,设计 ...

  4. python entrypoint

    entrypoint, 实际是一张匹配表.匹配简短指令和具体的python函数的执行路径.有点快捷方式的概念. 不同的是,这种快捷方式不仅可以给命令行使用,还可以供其他代码简单调用,而无需关注太多细节 ...

  5. mysql 同步

    http://dev.mysql.com/doc/refman/5.5/en/replication-howto.html http://blog.csdn.net/mycwq/article/det ...

  6. Service

      一.什么是Service Service在后台运行,不与用户进行交互.在默认情况下,Service运行在应用程序进程的主线程中,如果需要在Service中处理一些网络连接等耗时的操作,那么应该将这 ...

  7. mysql导入导出数据库命令

    1.导出数据库:mysqldump -u 用户名 -p 数据库名 > 导出的文件名 如我输入的命令行: mysqldump -u root -p news > /home/jason/sq ...

  8. Java总结（二）：继承——Inheritance

    关于继承: 1.为了重用代码——引入继承. 2.父类的某些方法反正要被重写,在父类里实现在也无用——引入抽象类. 3.把抽象类里的抽象方法抽出来——引入接口.

  9. HTML锚点参考II

    锚点使用:<a href="#a">会直接找到id为a的元素的位置,不需要其他设置.如此简单! <a href="#a"> <li ...

  10. Java中时间日期格式化

    1.与日期时间相关的类:      第一:java.util.Date;                           将时间作为一个整体使用.处理时,使用Date类较为简便      第二:j ...