`

Extjs form 组件

 
阅读更多

Extjs form 组件
1、Ext.form.Action
配置项:
success:执行成功后回调的函数,包括两个参数:form 和action
failure:执行失败后回调的函数,包括两个参数:form 和action
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
url:动作提交的路径
waitMsg:动作执行时显示的等待信息
属性:
Action.CLIENT_INVALID:客户端验证错误
Action.CONNECT_FAILURE:通信错误
Action.LOAD_FAILURE:加载数据时,没有包含data 属性的字段被返回
Action.SERVER_INVALID:服务端验证错误
failureType:错误类型
result:包含布尔类型的success 属性和其他属性,如{success: true, msg: 'ok'}
type:动作类型,可选值有submit 和load
Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success 属性和一个可选的
errors 属性
Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success 属性和一个data 属性
2、Ext.form.BasicForm
配置项:
baseParams:传递到请求中的参数
method:表单的提交方式,有效值包括GET、POST
url:表单默认的提交路径
fileUpload:表单是否进行文件上传
timeout:表单动作的超时时间,默认为30 秒
trackResetOnLoad:是否在表单初次创建时清楚数据
方法:
doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选
项包括:
url:动作提交的路径
method:表单的提交方式,有效值包括GET、POST
params:传递到请求中的参数
headers:
success:执行成功后回调的函数,包括两个参数:form 和action
failure:执行失败后回调的函数,包括两个参数:form 和action
clientValidation:是否客户端验证
clearInvalid():清除表单中所有的无效验证信息
findField( String id ):查找表单字段
getValues( [Boolean asString] ):
isDirty():表单数据是否被更改过
isValid():客户端验证是否成功
load( Object options ):执行表单读取动作
loadRecord( Record record ):从一个数据记录中读取数据到表单中
markInvalid( Array/Object errors ):成批设置表单字段为验证无效
reset():重置表单
setValues( Array/Object values ):成批设置表单字段值
submit( Object options ):执行表单提交动作
updateRecord( Record record ):持久化表单数据到记录集中
3、Ext.form.FormPanel
配置项:
items:一个元素或元素数组
buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中
buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center
labelWidth:表单标签的宽度
labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left
labelSeparator:字段标签与字段之间的分隔符,默认为':'
minButtonWidth:按钮的最小宽度,默认为75
方法:
getForm() : Ext.form.BasicForm
load( Object options )
startMonitoring()
stopMonitoring()
4、Ext.form.Field
配置项:
name:字段名
value:字段的初始化值
disabled:字段是否不可用,默认为false
fieldLabel:字段标签说明
hideLabel:隐藏字段标签,默认为false
labelSeparator:字段标签与字段之间的分隔符,默认为':'
labelStyle:字段标签样式
inputType:默认为text
invalidClass:默认为x-form-invalid
invalidText:字段非法文本提示
msgTarget:错误信息显示的位置,默认为qtip
qtip:显示一个浮动的提示信息
title:显示一个浏览器的浮动提示信息
under:在字段下方显示一个提示信息
side:在字段右边显示一个提示信息
readOnly:字段是否只读,默认为false
validateOnBlur:字段在失去焦点时被验证,默认为true
方法:
clearInvalid():
getRawValue()
setRawValue( Mixed value )
getValue()
setValue( Mixed value )
isDirty():字段值在装载后是否被修改过
isValid( Boolean preventMark ):当前字段值是否合法
markInvalid( [String msg] )
validate()
reset()
5、Ext.form.Hidden
6、Ext.form.Label
配置项:
html:
text:
7、Ext.form.TextField
配置项:
allowBlank:是否允许为空,默认为true
blankText:空验证失败后显示的提示信息
emptyText:在一个空字段中默认显示的信息
grow:字段是否自动伸展和收缩,默认为false
growMin:收缩的最小宽度
growMax:伸展的最大宽度
inputType:字段类型:默认为text
maskRe:用于过滤不匹配字符输入的正则表达式
maxLength:字段允许输入的最大长度
maxLengthText:最大长度验证失败后显示的提示信息
minLength:字段允许输入的最小长度
minLengthText:最小长度验证失败后显示的提示信息
regex:正则表达式
regexText:正则表达式验证失败后显示的提示信息
vtype:验证类型的名字
alpha:限制只能输入字母
alphanum:限制只能输入字母和数字
email
url
vtypeText:验证失败时的提示信息
validator:自定义验证函数
selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false
8、Ext.form.TextArea
配置项:
preventScrollbars:是否禁止出现滚动条,默认为false
9、Ext.form.NumberField
配置项:
allowDecimals:是否允许输入小数,默认为true
allowNegative:是否允许输入负数,默认为true
baseChars:输入的有效数字集合,默认为'0123456789'
decimalPrecision:数字的精度,默认保留小数点后2 位
decimalSeparator:十进制分隔符,默认为'.'
maxValue:允许输入的最大数值
maxText:超过最大值之后的提示信息
minValue:允许输入的最小数值
minText:超过最小值之后的提示信息
nanText:输入非有效数值之后的提示信息
10、Ext.form.Checkbox
配置项:
boxLabel:复选框的文字描述
checked:复选框是否被选择,默认为false
handler:当checked 值改变时触发的函数,函数包含两个参数:checkbox、checked
inputValue:
方法:
getValue():返回复选框的checked 状态
setValue( Boolean/String checked ):
11、Ext.form.CheckboxGroup
配置项:
allowBlank:是否允许不选择,默认为true
blankText:
columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)
items:对象数组
vertical:是否垂直方向显示对象,默认为false
12、Ext.form.Radio
方法:
getGroupValue():
setValue( value {String/Boolean} ):
13、Ext.form.RadioGroup
配置项:
allowBlank:
blankText:
14、Ext.form.ComboBox
配置项:
displayField:被显示在下拉框中的字段名
editable:是否可编辑,默认为true
forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择
第一个最接近的值。
hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,
当表单提交时在服务器端可以通过该名字取得列表中的所选值
listWidth:下拉列表的宽度
minListWidth:下拉列表的最小宽度,默认为70 像素
loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效
maxHeight:下拉列表框的最大高度,默认为300 像素
minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,
mode='local'默认为0
mode:下拉列表框的数据读取模式。remote 读取远程数据,local 读取本地数据
pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效
queryParam:查询的名字,默认为'query',将被传递到查询字符串中
allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串''
selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在
editable=true 时才会生效
store:列表框绑定的数据源
transform:将页面中已存在的元素转换为组合框
lazyInit:延时初始化下拉列表,默认为true
lazyRender:延时渲染,默认为false
triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all 和query,默认为query,
如果设置为all 则会执行allQuery 中设置的查询
typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),
默认为false
value:初始化组合框中的值
valueField:组合框的值字段
valueNotFoundText:值不存在时的提示信息
tpl:Ext 模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式
方法:
clearValue():清空字段当前值
doQuery( String query, Boolean forceAll ):
getValue():
getStore():
setValue( String value ):
15、Ext.form.DateField
配置项:
maxValue:允许选择的最大日期
maxText:当日期大于最大值时的错误提示信息
minValue:允许选择的最小时间
minText:当日期小于最小值时的错误提示信息
format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d”
Y:四位年份
m:带前缀0 的月份
d:带前缀0 的日期
y:两位年份
n:不带前缀0 的月份
j:不带前缀0 的日期
w:星期的数字,0 表示星期日,1 代表星期一
showToday:是否显示今天按钮,默认为true
altFormats:多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为
'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d'
disabledDates:禁止选择的日期组成的数组
disabledDatesText:选择禁选日期时显示的提示信息
disabledDays:禁止选择的星期组成的数组,0 代表星期日,1 代表星期一
disabledDaysText:选择禁选星期时显示的提示信息
invalidText:当日期值非法时显示的提示信息
方法:
getValue():取得日期值
16、Ext.form.FieldSet
配置项:
animCollapse:动画折叠,默认为false
checkboxToggle:设置是否显示字段集的checkbox 选择框,默认为false
checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox 的名字,该属性只有在
checkboxToggle 为true 时生效
labelWidth:字段标签的宽度,可以级联到子容器
layout:布局,默认为form
17、Ext.form.TimeField
配置项:
maxValue:列表中允许的最大时间
maxText:当时间大于最大值时的错误提示信息
minValue:列表中允许的最小时间
minText:当时间小于最小值时的错误提示信息
increment:两个相邻选项间的时间间隔,默认为15 分钟
format:显示格式,默认为“g:i A”。一般使用“H:i:s”
H:带前缀0 的24 小时
i:带前缀0 的分钟
s:带前缀0 的秒
invalidText:当时间值非法时显示的提示信息
altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割

分享到:
评论

相关推荐

    extjs-form组件配置参数详解

    ### extjs-form组件配置参数详解 #### 一、Ext.form.Action `Ext.form.Action`是ExtJS中的一个类,用于处理表单提交和加载数据的动作。它提供了多种配置选项和属性来控制表单操作的过程。 **配置项** - **success*...

    extjs 3.1 组件 使用

    `Form`组件用于创建表单,包括各种输入控件如文本框、选择框等;`Grid`组件用于展示表格数据,支持排序、分页和编辑等功能。每个组件都有丰富的配置项和API,允许开发者自定义其行为。 对于源码的探索,了解组件的...

    ext form小例子

    EXTJS Form组件是EXTJS库中的重要组成部分,用于创建丰富的、交互式的表单界面。它提供了各种表单字段、布局选项以及验证功能,使得开发者能够构建功能强大的数据输入和展示界面。在“EXT form小例子”中,我们将...

    extjs-form组件配置参数详解.pdf

    extjs-form组件配置参数详解.pdf

    EXTJS 上传组件及示例

    EXTJS 的上传组件通常通过`Ext.form.field.File`(也称为FileField或UploadField)实现。这个组件提供了一个表单字段,用户可以通过点击“浏览”按钮选择本地文件,然后提交表单进行上传。以下是一些关于EXTJS上传...

    ExtJS日期多选组件源码

    通过研究和理解"ExtJS日期多选组件源码",开发者可以深入学习ExtJS组件设计、事件处理、数据绑定等核心概念,并能进一步定制适合自己项目需求的日期选择组件。这样的组件对于提高开发效率和用户体验具有积极的意义。

    Extjs3.0 常用组件介绍及怎么安装开发利器Spket

    3. **Form(表单)**: ExtJS提供了多种表单组件,如文本框、下拉框、复选框、按钮等,以及表单验证功能,方便用户输入和提交数据。 4. **Tree(树形)**: Tree组件用于显示层次结构的数据,如目录结构或组织架构,...

    EXTjs+oracle

    4. **EXTjs Form组件**:用于数据输入,包括Field、FormPanel等。这些组件可以用于新建和编辑记录,与Oracle数据库进行数据交换。 5. **Oracle数据库连接**:在EXTjs应用中,通常使用后端服务(如Java、PHP或Node....

    Extjs自定义组件-下拉树

    ### Extjs自定义组件——下拉树:深入解析与实现 在现代Web开发中,Extjs作为一款功能强大且灵活的框架,深受开发者喜爱。它提供了丰富的UI组件库,能够帮助开发者快速构建复杂的用户界面。其中,自定义组件是Extjs...

    ExtJs组件类的对应表

    ### ExtJs组件类的对应表解析 #### 引言 ExtJs是一款强大的JavaScript框架,用于构建复杂的、数据密集型的应用程序。它提供了大量的组件和工具,使得开发者能够快速地创建美观且功能丰富的用户界面。本文将详细...

    EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题

    在使用EXTJS构建表单时,用户遇到了在特定环境下EXTJS FORM组件中HIDDEN TEXTFIELD赋值时遇到的问题。具体而言,尽管在使用“value”属性为HIDDEN类型的TEXTFIELD赋值,但在某些机器上该值无法正确赋上。用户通过给...

    extjs3.0 组件

    除了以上组件,EXTJS 3.0 还包含了许多其他组件,如工具栏(Toolbar)、按钮(Button)、提示框(Tip)等,这些组件共同构建了EXTJS 强大的组件生态系统。开发者可以根据需要组合使用这些组件,构建出功能完备、用户...

    Extjs4的FormPanel从后台load json数据的要点

    `Ext.form.Panel`是Extjs4提供的一个用于创建复杂表单的组件。它允许开发者构建包含多个输入字段、按钮以及其他交互元素的表单,并且提供了大量的功能来帮助处理表单数据,如验证、提交以及数据绑定等。 ### 二、...

    ExtJs 带清空功能的日期组件

    在ExtJs框架中,日期组件(DateField)是用于用户输入日期的常见控件。然而,标准的ExtJs DateField并未内置清空日期的功能,这可能会在某些应用场景中造成不便。为了解决这个问题,我们需要自定义一个扩展,为日期...

    extjs4 入门基础,form、grid、tree

    它提供了一整套组件化的用户界面元素,包括表单(Form)、网格(Grid)、树形视图(Tree)等,使得开发者能够创建出功能丰富且交互性强的前端应用。在深入探讨ExtJS 4的基础知识之前,首先确保你已经下载了ExtJS ...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    ExtJs 动态添加表单

    首先,我们要理解表单(Form)在ExtJS中的基本概念。表单是数据输入和验证的核心组件,可以包含各种字段类型,如文本框、下拉菜单、复选框等。这些字段可以通过`Ext.form.field.Field`基类进行扩展,每个字段都有其...

    实现extjs4 的树、grid、form、query等大部分组件的功能

    表单(Form)组件是EXTJS用于收集和展示用户输入的工具。EXTJS4提供了多种表单字段类型,如文本框、密码框、下拉列表等,且支持表单验证。表单的数据同样与store绑定,可以方便地进行数据提交和读取。 查询(Query...

    Extjs上传组件

    在ExtJS中,上传组件通常基于`Ext.form.FileField`或`Ext.form.Basic`来创建。`Ext.form.FileField`(旧版本中称为`Ext.form.field.File`)是表单字段的一种,用于处理文件选择。它通常与一个隐藏的`...

Global site tag (gtag.js) - Google Analytics