ExtJS4.2学习(17)表单基本输入控件Ext.form.Field

最新推荐文章于 2021-05-30 23:24:57 发布
最新推荐文章于 2021-05-30 23:24:57 发布
阅读量111 收藏
点赞数
文章标签： java javascript ViewUI
原文链接：https://yq.aliyun.com/articles/469356
版权

QQ截图20131211232738.jpg

Ext.form.Field是所有表单输入控件的基类，其他的输入控件都是基于Ext.form.Field扩展得来的。 Ext.form.Field中定义了输入控件通用的属性和功能函数，这些通用的属性和功能函数大致分为3大类：页面显示样式、控件参数配置和数据有效性检验。我们先来看看表单输入控件可以使用的校验显示方式。默认情况下，这些输入控件会监听blur事件，如果数据校验失败，就会根据msgTarget中的设置显示错误信息。通常，msgTarget会被设置为qtip，即使用QuickTip显示错误信息，也可以将msgTarget设置为title、side、under中的一种，这样错误信息就会以指定的方式显示。因为所有的输入控件都继承自 Ext.form.Field，所以我们可以为任何一个表单输入控件进行这些设置，改变它们的错误信息显示方式。具体代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8" >
< title >Hello Extjs4.2</ title >
< link  href = "../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"  rel = "stylesheet" >
< script  src = "../../ExtJS4.2/ext-all.js" ></ script >
< script  src = "../../ExtJS4.2/locale/ext-lang-zh_CN.js" ></ script >
< script  type = "text/javascript" >
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,
         fieldDefaults:{
             labelAlign:'right', //文本对齐方式
             labelWidth:150
         },
         items: [field1, field2, field3, field4],
         renderTo: 'form'
     });
                                                        
                                                        
     form.getForm().isValid();
});
</ script >
</ head >
< body >
< h1 >我的ExtJS4.2学习之路</ h1 >
< hr  />
作者：束洋洋
开始日期：2013年12月11日21:01:19
< h2 >深入浅出ExtJS之表单基本输入控件Ext.form.Field</ h2 >
< div  id = "form" ></ div >
</ body >
</ html >

qtip方式：默认显示方式，显示为悬浮框提示错误文字；

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

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

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

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

QQ截图20131211232738.jpg

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
< html >
< head >
< meta  http-equiv = "Content-Type"  content = "text/html; charset=UTF-8" >
< title >Hello Extjs4.2</ title >
< link  href = "../../ExtJS4.2/resources/ext-theme-neptune/ext-theme-neptune-all.css"  rel = "stylesheet" >
< script  src = "../../ExtJS4.2/ext-all.js" ></ script >
< script  src = "../../ExtJS4.2/locale/ext-lang-zh_CN.js" ></ script >
< script  type = "text/javascript" >
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'
     });
});
</ script >
</ head >
< body >
< h1 >我的ExtJS4.2学习之路</ h1 >
< hr  />
作者：束洋洋
开始日期：2013年12月11日21:13:50
< h2 >深入浅出ExtJS之文本输入控件Ext.form.TextField</ h2 >
< div  id = "form" ></ div >
</ body >
</ html >



本文转自shyy8712872 51CTO博客，原文链接：http://blog.51cto.com/shuyangyang/1404502，如需转载请自行联系原作者

weixin_34174132
关注
Ext JS 3.2.1 字段组件父类 Ext.form.field.Base
oscar999的专栏
03-29 1316
划重点 Ext.form.field.Base 是组件元素类的父类，一般不直接使用 xtype是field 对应的类是 Ext.form.field.Base，而不是 Ext.form.field.Field 输入框的类结构 输入框主要的类结构如下图 输入框类型的父类是 Ext.form.field.Base ， 该组件类的xtype是 field。 注意： Ext.form.field 的命名空间之下还有一个类 Ext.form.field.Field， 这个类没有xtype。 Ext.form
(13)ExtJS之Ext.form.field.RadioGroup、Ext.form.field.CheckboxGroup
虚心求学_一点一滴
02-27 1572
JS文件： //5：RadioGroup、CheckboxGroup，可以横排，成组管理 Ext.onReady(function(){ new Ext.form.FormPanel({ title:'RadioGroup、CheckboxGroup示例', bodyStyle:'padding:5 5 5 5',//表单边距 frame:true, heigh
【ExtJs】 ExtJs4.2 基本表单组件的使用
a84480766的博客
12-30 147
包含ExtJs 基本的组件radioGroup,ComboBox,File,NumberField... <%-- Created by IntelliJ IDEA. User: Administrator Date: 2015/12/30 0030 Time: 13:35 To change this template use File | S...
extjs form java_ExtJS4.2学习(17)表单基本输入控件Ext.form.Field
weixin_29801567的博客
02-15 207
Ext.form.Field是所有表单输入控件的基类，其他的输入控件都是基于Ext.form.Field扩展得来的。 Ext.form.Field中定义了输入控件通用的属性和功能函数，这些通用的属性和功能函数大致分为3大类：页面显示样式、控件参数配置和数据有效性检验。我们先来看看表单输入控件可以使用的校验显示方式。默认情况下，这些输入控件会监听blur事件，如果数据校验失败，就会根据msgTarg...
Ext.form.Field
zhaoqian888的专栏
10-10 126
4、Ext.form.Field 配置项： name：字段名 value：字段的初始化值 disabled：字段是否不可用，默认为false fieldLabel：字段标签说明 hideLabel：隐藏字段标签，默认为false labelSeparat...
(14)ExtJS之Ext.form.field.Trigger触发字段
虚心求学_一点一滴
02-27 3853
JS文件： //6：Trigger Ext.onReady(function(){ var testForm=new Ext.form.Panel({ title:'Ext.form.field.Trigger示例', bodyStyle:'padding:5', frame:true, height:100, width:270, renderTo
ExtJS4.2带时分秒的日期控件扩展实现
这是一个自定义的EXTJS组件，它继承自EXTJS的内置`Ext.form.field.Date`类，并对其进行了扩展。通过定义`xtype: 'zc_form_DatetimeField'`，我们可以方便地在表单中引用这个自定义的日期时间控件。这意味着你可以像...
(10)ExtJS之Ext.form.filed.TextArea文本区
虚心求学_一点一滴
02-27 3196
JS文件： Ext.onReady(function(){ Ext.QuickTips.init(); var testForm=new Ext.form.Panel({ title:'Ext.form.field.TextArea示例', bodyStyle:'padding:5',//表单边距 frame:true, height:150,
extjs4.2 日期控件扩展带时分秒
12-19
- 这个类继承自`Ext.form.field.Date`，并通过添加新的配置选项和方法来实现时间和日期的综合选择。 - **依赖组件**：`Ext.zc.form.DateTimePicker` - 此组件负责展示日期时间选择器界面，提供用户交互操作。 ###...
ExtJS4.2学习(17)表单基本输入控件Ext.form.Field（转）
weixin_34161064的博客
11-23 126
鸣谢：http://www.shuyangyang.com.cn/jishuliangongfang/qianduanjishu/2013-12-11/189.html ------------------------------------------------------------------------------------------- Ext.form.Field是所有表单输入...
ExtJS笔记--Ext.form.FieldSet
wjt276的专栏
09-12 182
Ext.form.FieldSet 类全称： Ext.form.FieldSet 继承自于： Ext.Panel 针对某一组字段的标准容器。  配置项   1、checkboxToggle : Mixed  True表示在lengend标签之前fieldset的范围内渲染一个checkbox，或者送入一个DomHelper的配置对象制定 checkbox（默认为false）。选择该...
Ext.form.Checkbox
chick56的技术专栏
10-29 3692
<br />类全称：Ext.form.Checkbox<br />继承自于：Ext.form.Field<br /> <br />单独的checkbox域，可以直接代替传统checkbox域。 <br /> <br />配置项<br />1、focusClass : String <br />当表单元素获取焦点时的CSS样式（默认为"x-form-focus"）<br /> <br />2、fieldClass : String <br />表单元素一般状态CSS样式（默认为"x-form-field"）。
ExtJS笔记--Ext.form.Checkbox
wjt276的专栏
09-11 437
Ext.form.Checkbox 类全称： Ext.form.Checkbox 继承自于： Ext.form.Field 单独的checkbox域，可以直接代替传统checkbox域。  配置项 1、focusClass : String  当表单元素获取焦点时的CSS样式（默认为"x-form-focus"） 2、fieldClass : String  表单元...
Ext_Ext.form.Field基类
66
04-11 2949
<!--/*其他表单字段都从Ext.form.Field类中扩展Ext.form.Field主要配置项表:name String 字段名(数据提交后台的名称)id String 控件唯一表示(系统会自动生成)value String
ExtJs_Ext.form.Field解说
cenyebao的专栏
09-16 5451
/*!  * Ext JS Library 3.3.0  */ /**  * @class Ext.form.Field  * @extends Ext.BoxComponent  * Base class for form fields that provides
html字段编辑器,编辑器字段字段Ext.form.field.HtmlEditor
weixin_39871378的博客
05-30 222
编辑器Ext.onReady(function(){//Ext表单//Ext.form.Basic基本表单组件二(拾取器字段Picker)//开发中使用表单面板组件Ext.form.Panel,它本质是一个标准的(面板)Ext.panel.Panel,它内置并自动创建了Ext.form.Basic基本表单组件//与原始表单主要3点不同(1.提交方式2.表单验证3.表单组件)//1.提交方式...
文件上传字段Ext.form.field.File(扩展Text)
weixin_34315665的博客
02-02 635
2019独角兽企业重金招聘Python工程师标准>>> ...
Ext的form类型扩展（二）——AttachField
清凉世界
06-29 185
类名:Ext.form.AttachField 扩展自:Ext.form.TriggerField 功能描述:能够处理多个附件的本地上传、删除、浏览，支持进度显示 如何部署： -------------s端---------------------- 预备工作：建立Web工程，增加dwr支持 1.将附件源码net.bar的java类加入你的Web工程 2.在web.xml加入以下定义  &lt;...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值