鸣谢:http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html

-------------------------------------------------------------------------------------------

Ext.form.Field是所有表单输入控件的基类,其他的输入控件都是基于Ext.form.Field扩展得来的。 Ext.form.Field中定义了输入控件通用的属性和功能函数,这些通用的属性和功能函数大致分为3大类:页面显示样式、控件参数配置和数据有效性检验。

我们先来看看表单输入控件可以使用的校验显示方式。默认情况下,这些输入控件会监听blur事件,如果数据校验失败,就会根据msgTarget中的设置显示错误信息。通常,msgTarget会被设置为qtip,即使用QuickTip显示错误信息,也可以将msgTarget设置为title、side、under中的一种,这样错误信息就会以指定的方式显示。因为所有的输入控件都继承自 Ext.form.Field,所以我们可以为任何一个表单输入控件进行这些设置,改变它们的错误信息显示方式。

具体代码如下:

/*** 此js演示了Extjs表单中效验的不同显示方式*/
Ext.onReady(function(){  // HtmlEditor需要这个
    Ext.tip.QuickTipManager.init();  var field1 = new Ext.form.TextField({  fieldLabel: 'qtip错误显示方式',  msgTarget: 'qtip',  allowBlank: false  });  var field2 = new Ext.form.TextField({  fieldLabel: 'title错误显示方式',  msgTarget: 'title',  allowBlank: false  });  var field3 = new Ext.form.TextField({  fieldLabel: 'side错误显示方式',  msgTarget: 'side',  allowBlank: false  });  var field4 = new Ext.form.TextField({  fieldLabel: 'under错误显示方式',  msgTarget: 'under',  allowBlank: false  });  var form = new Ext.form.FormPanel({  title: '表单输入控件演示',  frame: true, width:400,fieldDefaults:{  labelAlign:'right', //文本对齐方式  labelWidth:150  },  items: [field1, field2, field3, field4],  renderTo: 'form'  });  form.getForm().isValid();
});  

qtip方式:默认显示方式,显示为悬浮框提示错误文字;

title方式:类似HTML超链接中设置的title

side方式:输入框后出现错误图标,鼠标放上去会显示错误信息

under方式:文本框下方出现错误提示图标和文字

接下来会对上节中出现的控件一一作介绍,本篇先说说文本输入控件(Ext.form.TextField)、多行文本输入控件(Ext.form.TextArea)和日期输入控件(Ext.form.DateField)

代码如下,相关属性已经在注释中写明。

/*** 此js演示了Extjs表单中文本输入控件(Ext.form.TextField)、* 多行文本输入控件(Ext.form.TextArea)和日期输入控件(Ext.form.DateField)的效验*/
Ext.onReady(function(){  var field = new Ext.form.TextField({  fieldLabel: 'empty', //输入控件前显示名称  allowBlank: false, //是否允许为空  emptyText:'空', //没有输入任何内容提示文字  maxLength:50, //输入最大字符串长度  minLength:10 //输入最小字符串长度
    });  var fieldTextArea = new Ext.form.TextArea({  width:200,  grow:true, //会根据输入内容自动修改自身高度  preventScrollbars:true, //防止出现滚动条,如果内容超出显示范围就会自动隐藏  fieldLabel:'empty',  allowBlank:false,  emptyText:'空',  maxLength:50,  minLength:10  });  var fieldDate = new Ext.form.DateField({  fieldLabel:'日期',  emptyText:'请选择',  format:'Y-m-d',  disabledDays:[0,6] //禁止选择的日期
    });   var form = new Ext.form.FormPanel({  title: '表单输入控件演示',  width:500,  frame: true,  items: [field,fieldTextArea,fieldDate],  renderTo: 'form'  });
});

后记:本变博客编辑的两个表单不支持IE浏览器。

转载于:https://www.cnblogs.com/wql025/p/4987321.html

ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)相关推荐

  1. jquery-文档操作-标签取值-输入控件取值与赋值

    html 文本 值 获取标签包裹的内容 dom的属性 jquery的方法 演练 小结 dom对象,jquery对象,取值方式的对等 对象 纯文本 html文本 dom innerText innerH ...

  2. INFO:InstallShield InstallScript工程中自定义界面文本输入控件的两个注意事项

    在使用InstallScript工程增加自定义界面过程中,我用到了文本输入控件(Edit Field),用于用户名和密码的输入. 首先是用户名,如果用户名长度超过我的控件长度时,发现无法再继续输入内容 ...

  3. 通达OA-今日学习:OFFICE文档在线编辑控件与工作流表单手写签章控件的区别是什么?

    NTKOOFFICE文档在线编辑控件,控件提供商为重庆软航科技,使用范围:OA各个模块上传附件(比如文件柜.工作流.公告通知等模块),如果是Office文档,就可以在线编辑或阅读,在线编辑时可以加盖电 ...

  4. 灵活的VueJS输入控件可进行评级

    电视明星 (vue-stars) Flexible VueJS input control for ratings (stars, etc.) 灵活的VueJS输入控件,用于收视率(星级等) View ...

  5. WPF IP地址输入控件的实现

    WPF IP地址输入控件的实现 原文:WPF IP地址输入控件的实现 一.前言 WPF没有内置IP地址输入控件,因此我们需要通过自己定义实现. 我们先看一下IP地址输入控件有什么特性: 输满三个数字焦 ...

  6. vs2010 学习Silverlight学习笔记(8):使用用户控件

    概要: 这个类似于封装控件样式.不过封装的是整个或是多个控件罢了,然后用的时候就可以直接引用过来了. 创建用户控: 这个也很简单,不过有几个地方需要注意下.这个就不照抄了,咱们也自己写一个. 步骤: ...

  7. 一起学Windows Phone7开发(十三.三 输入控件)

    在Phone7中主要的输入控件其实就有两个,一个是textbox,另一个就是password控件.这两个控件中尤其是TextBox控件有了很多新特性. 一.PasswordBox:   密码框控件,用 ...

  8. Bootstrap3 表单支持的控件

    支持的控件 Bootstrap支持所有的标准表单控件,包括 input 控件.textarea 控件.checkbox 和 radio 控件.select 控件等. 1.input 控件 Bootst ...

  9. SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)...

    做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...

最新文章

  1. 错误提示没了_ESC错误排查-系统启动篇
  2. 苹果挂端口方法_苹果新系统遭吐槽!SSH 默认规则被破坏,程序员无法登录 Web 服务器......
  3. mysql系列十、mysql索引结构的实现B+树/B-树原理
  4. tortoisesvn › prefer local prefer repository
  5. 测试x86cpu的指令集
  6. 第20天学习Java的笔记-static静态
  7. [react] 使用PropTypes和Flow有什么区别?
  8. mysql 存储过程创建以及调用
  9. 网络恶意营销账号猖獗,国家网信办出手了
  10. linux命令 查找包含指定字符串的文件
  11. 基于vue的video播放组件的后续修改
  12. Singleton(单件)
  13. 读卡器与IC/ID卡的基本认识
  14. 7-6 古风排版 (20分)
  15. # responses[name] = response
  16. linux调整逻辑卷大小,调整Linux逻辑卷大小
  17. 左偏树初步学习 洛谷P3377
  18. matlab 符号 积分法,MATLAB积分方法
  19. Matlab 元胞自动机(模拟传染病传播)
  20. verify(验证)

热门文章

  1. Spring之动态注册bean
  2. Spring Cloud Config - RSA简介以及使用RSA加密配置文件
  3. 一些常用的场景进行描述分析(权限管理、6个典型场景)
  4. 福州:物联网产业加速集聚 每年安排不低于1000万元专项资金
  5. ​Java面向对象的概念整理
  6. IPsec ***路由配置
  7. 如何判断单链表是否存在环
  8. (转)android UI进阶之自定义组合控件
  9. URAL 1806 Mobile Telegraphs
  10. 怎么用shell ssh,然后再exit?