您的位置：首页 > Web前端 > JavaScript

无废话ExtJs 入门教程五[文本框：TextField]

2016-04-21 09:06 597 查看

无废话ExtJs 入门教程五[文本框：TextField]

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系列教程

好文要顶
关注我
收藏该文联系我

李林峰的园子
关注 - 37
粉丝 - 1827

+加关注

20
0

(请您对文章做出评价)

«
上一篇：无废话ExtJs 入门教程四[表单：FormPanel]
»
下一篇：无废话ExtJs 入门教程六[按钮：Button]

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航