ExtJS4.2学习(17)表单基本输入控件Ext.form.Field(转)
鸣谢: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(转)相关推荐
- jquery-文档操作-标签取值-输入控件取值与赋值
html 文本 值 获取标签包裹的内容 dom的属性 jquery的方法 演练 小结 dom对象,jquery对象,取值方式的对等 对象 纯文本 html文本 dom innerText innerH ...
- INFO:InstallShield InstallScript工程中自定义界面文本输入控件的两个注意事项
在使用InstallScript工程增加自定义界面过程中,我用到了文本输入控件(Edit Field),用于用户名和密码的输入. 首先是用户名,如果用户名长度超过我的控件长度时,发现无法再继续输入内容 ...
- 通达OA-今日学习:OFFICE文档在线编辑控件与工作流表单手写签章控件的区别是什么?
NTKOOFFICE文档在线编辑控件,控件提供商为重庆软航科技,使用范围:OA各个模块上传附件(比如文件柜.工作流.公告通知等模块),如果是Office文档,就可以在线编辑或阅读,在线编辑时可以加盖电 ...
- 灵活的VueJS输入控件可进行评级
电视明星 (vue-stars) Flexible VueJS input control for ratings (stars, etc.) 灵活的VueJS输入控件,用于收视率(星级等) View ...
- WPF IP地址输入控件的实现
WPF IP地址输入控件的实现 原文:WPF IP地址输入控件的实现 一.前言 WPF没有内置IP地址输入控件,因此我们需要通过自己定义实现. 我们先看一下IP地址输入控件有什么特性: 输满三个数字焦 ...
- vs2010 学习Silverlight学习笔记(8):使用用户控件
概要: 这个类似于封装控件样式.不过封装的是整个或是多个控件罢了,然后用的时候就可以直接引用过来了. 创建用户控: 这个也很简单,不过有几个地方需要注意下.这个就不照抄了,咱们也自己写一个. 步骤: ...
- 一起学Windows Phone7开发(十三.三 输入控件)
在Phone7中主要的输入控件其实就有两个,一个是textbox,另一个就是password控件.这两个控件中尤其是TextBox控件有了很多新特性. 一.PasswordBox: 密码框控件,用 ...
- Bootstrap3 表单支持的控件
支持的控件 Bootstrap支持所有的标准表单控件,包括 input 控件.textarea 控件.checkbox 和 radio 控件.select 控件等. 1.input 控件 Bootst ...
- SNF快速开发平台MVC-各种级联绑定方式,演示样例程序(包含表单和表格控件)...
做了这么多项目,经常会使用到级联.联动的情况. 如:省.市.县.区.一级分类.二级分类.三级分类.仓库.货位. 方式:有表单需要做级联的,还是表格行上需要做级联操作的. 实现:实现方法也有很多种方式. ...
最新文章
- 错误提示没了_ESC错误排查-系统启动篇
- 苹果挂端口方法_苹果新系统遭吐槽!SSH 默认规则被破坏,程序员无法登录 Web 服务器......
- mysql系列十、mysql索引结构的实现B+树/B-树原理
- tortoisesvn › prefer local prefer repository
- 测试x86cpu的指令集
- 第20天学习Java的笔记-static静态
- [react] 使用PropTypes和Flow有什么区别?
- mysql 存储过程创建以及调用
- 网络恶意营销账号猖獗,国家网信办出手了
- linux命令 查找包含指定字符串的文件
- 基于vue的video播放组件的后续修改
- Singleton(单件)
- 读卡器与IC/ID卡的基本认识
- 7-6 古风排版 (20分)
- # responses[name] = response
- linux调整逻辑卷大小,调整Linux逻辑卷大小
- 左偏树初步学习 洛谷P3377
- matlab 符号 积分法,MATLAB积分方法
- Matlab 元胞自动机(模拟传染病传播)
- verify(验证)