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. HDU——PKU题目分类

    HDU 模拟题, 枚举1002 1004 1013 1015 1017 1020 1022 1029 1031 1033 1034 1035 1036 1037 1039 1042 1047 1048 ...

  2. 15 BasicHashTable基本哈希表类(二)——Live555源码阅读(一)基本组件类

    这是Live555源码阅读的第一部分,包括了时间类,延时队列类,处理程序描述类,哈希表类这四个大类. 本文由乌合之众 lym瞎编,欢迎转载 http://www.cnblogs.com/oloroso ...

  3. trac中wiki直接显示任务代码

    = 我的任务 = [[TicketQuery(max=10,owner=$USER, status!=closed|verified|cancelled, order=id,desc=1,format ...

  4. 【Nginx】nginx 代理 Haproxy 怎么设置？

    由于Haproxy是通过 url 正则匹配 识别 的,nginx代理到 haproxy需要设置 proxy_set_header Host 为 haproxy的目标 url 直接上配置 upstrea ...

  5. 五步搞定Android开发环境部署——非常详细的Android开发环境搭建教程

      在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环境的搭 ...

  6. Split Array Largest Sum

    Given an array which consists of non-negative integers and an integer m, you can split the array int ...

  7. WinForm开发框架--动态读取DLL模式

    1\ WinForm开发框架--动态读取DLL模式   http://www.2cto.com/kf/201306/217199.html 2\ 广州爱奇迪     http://www.iqidi. ...

  8. ACM/ICPC 之 递归(POJ2663-完全覆盖+POJ1057(百练2775)-旧式文件结构图)

    POJ2663-完全覆盖 题解见首注释 //简单递推-三个米诺牌(3*2)为一个单位打草稿得出规律 //题意-3*n块方格能被1*2的米诺牌以多少种情况完全覆盖 //Memory 132K Time: ...

  9. Java for LeetCode 230 Kth Smallest Element in a BST

    解题思路: 直接修改中序遍历函数即可,JAVA实现如下: int res = 0; int k = 0; public int kthSmallest(TreeNode root, int k) { ...

  10. 【转】Android Support v4、v7、v13的区别和应用场景

    google提供了Android Support Library package 系列的包来保证来高版本sdk开发的向下兼容性,即我们用4.x开发时,在1.6等版本上,可以使用高版本的有些特性,如fr ...