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

继上一节内容,我们在表单里加了个两个文本框。如下所示代码区的第42行位置,items: [txtusername, txtpassword]。

1.代码如下:

  1. 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. 2 <html xmlns="http://www.w3.org/1999/xhtml">
  3. 3 <head>
  4. 4 <title></title>
  5. 5 <!--ExtJs框架开始-->
  6. 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script>
  7. 7 <script type="text/javascript" src="/Ext/ext-all.js"></script>
  8. 8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" />
  9. 9 <!--ExtJs框架结束-->
  10. 10 <script type="text/javascript">
  11. 11 Ext.onReady(function () {
  12. 12 //初始化标签中的Ext:Qtip属性。
  13. 13 Ext.QuickTips.init();
  14. 14 Ext.form.Field.prototype.msgTarget = 'side';
  15. 15 //用户名input
  16. 16 var txtusername = new Ext.form.TextField({
  17. 17 width: 140,
  18. 18 allowBlank: false,
  19. 19 maxLength: 20,
  20. 20 name: 'username',
  21. 21 fieldLabel: '用户名称',
  22. 22 blankText: '请输入用户名',
  23. 23 maxLengthText: '用户名不能超过20个字符'
  24. 24 });
  25. 25 //密码input
  26. 26 var txtpassword = new Ext.form.TextField({
  27. 27 width: 140,
  28. 28 allowBlank: false,
  29. 29 maxLength: 20,
  30. 30 inputType: 'password',
  31. 31 name: 'password',
  32. 32 fieldLabel: '密码',
  33. 33 blankText: '请输入密码',
  34. 34 maxLengthText: '密码不能超过20个字符'
  35. 35 });
  36. 36 //表单
  37. 37 var form = new Ext.form.FormPanel({
  38. 38 frame: true,
  39. 39 title: '表单标题',
  40. 40 style: 'margin:10px',
  41. 41 html: '<div style="padding:10px">这里表单内容</div>',
  42. 42 items: [txtusername, txtpassword]
  43. 43 });
  44. 44 //窗体
  45. 45 var win = new Ext.Window({
  46. 46 title: '窗口',
  47. 47 width: 476,
  48. 48 height: 374,
  49. 49 html: '<div>这里是窗体内容</div>',
  50. 50 resizable: true,
  51. 51 modal: true,
  52. 52 closable: true,
  53. 53 maximizable: true,
  54. 54 minimizable: true,
  55. 55 items: form
  56. 56 });
  57. 57 win.show();
  58. 58 });
  59. 59 </script>
  60. 60 </head>
  61. 61 <body>
  62. 62 <!--
  63. 63 说明:
  64. 64 (1)Ext.QuickTips.init():QuickTips的作用是初始化标签中的Ext:Qtip属性,并为它赋予显示提示的动作。
  65. 65 (2)Ext.form.Field.prototype.msgTarget = 'side'TextField的提示方式为:在右边缘,如上图所示,参数枚举值为"qtip","title","under","side",id(元素id),
  66. 66 side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示。
  67. 67 (3)var txtusername = new Ext.form.TextField():创建一个新的TextField文本框对象。
  68. 68 (4)allowBlank: false:不允许文本框为空。
  69. 69 (5)maxLength: 20:文本框的最大长度为20个字符,当超过20个字符时仍然可以继续输入,但是Ext会提示警告信息。
  70. 70 (6)name: 'password':表单名称,这个比较重要,因为我们在与服务器交互的时候,服务端是按name接收post的参数值。
  71. 71 (7)fieldLabel: '用户名':文本框前面显示的文字标题,如“用户名”,“密码”等。
  72. 72 (8)blankText: '请输入用户名':当非空校验没有通过时的提示信息。
  73. 73 (9) maxLengthText: '用户不能超过20个字符':当最大长度校验没有通过时的提示信息。
  74. 74 -->
  75. 75 </body>
  76. 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. gjd

    #include <cstdio> #include <cstring> #include <malloc.h> #define radix (1u<< ...

  2. Java BigDecimal使用

    //除法:精确到后4位BigDecimal a = new BigDecimal(1213); BigDecimal b = new BigDecimal(10302); BigDecimal rat ...

  3. JSP工作原理

    一.历史 JSP是Servlet的扩展,JSP没出现之前,就已经出现了Servlet技术.Servlet是利用了"输出流",动态的生成了HTML页面.包括 每一个HTML标签和所有 ...

  4. ubuntu set ntpdate

    1.  安装ntpdate工具 # sudo apt-get install ntpdate 2.  设置系统时间与网络时间同步 # ntpdate cn.pool.ntp.org 3.  将系统时间 ...

  5. Oracle11g +Win 64+PLSQL9.0

    最近在Oracle11g配置数据库的时候发现了一个问题,就是找不到监听,网上说win7的64位的系统必须装上32位的客户端才能被PLSQL 识别,事实上也是这样,PLSQL 只能识别32位的客户端,所 ...

  6. python to be linux daemon

    所需第三方库:python-daemon[https://pypi.python.org/pypi/python-daemon/] 使用方式: python linux_service.py star ...

  7. rman

    http://wenku.baidu.com/link?url=UGVBgYKaKoT7_KI-jpj3BG0XF_7_kpZBZLoXD-9uTQkpw-brlacrkVNcfkHEXuax4ahc ...

  8. ZPF MYSQL数据库链接层

    2015年3月31日 18:27:34 最后编辑: 2016年4月17日 00:22:00 星期日 读写分离: 根据最终的sql语句来判断是读还是写  (随后会考察并加上一致性哈希) 链式调用: 参看 ...

  9. java读取excel

    /* * this function will read from excel * and will return the items of excel */ public static String ...

  10. 1.JS设计模式-this,call&apply

    1. this,call&apply 1.1 this this是Javascript语言的一个关键字. 它代表函数运行时,自动生成的一个内部对象,只能在函数内部使用. 1.1.1 普通函数调 ...