Ext.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:限制只能输入字母和数字
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:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割
发表评论
-
修改extjs4默认字体
2014-10-13 16:02 383.x-btn-default-small .x-btn ... -
ExtJs默认的字体大小改变的几种方法
2014-10-13 10:11 5961、 只需把ext-all.css样式文件中的所有11px换 ... -
Eclipse环境下配置spket中ExtJS提示
2014-08-20 14:57 469使用eclipse编写extjs时,一定会用到spket这个 ... -
extjs继承,先调用父类方法
2014-07-17 14:27 972Ext.define('Xap.core.ui.extjs. ... -
extjs4.0 Ext.Array 函数方法大全
2014-07-17 10:38 504Ext.onReady(function(){ ... -
JSDuck安装及使用
2014-07-15 10:40 1308Javascript:前端利器 之 JSDuck 目 ... -
ext 获取radiogroup的值
2013-03-07 11:46 842在grid工具栏中 this.tbar = [{ ... -
ext 上传
2013-01-28 22:23 610今天发现ext 上传带有如下特殊字符 \/:*?“< ... -
ext grid 隐藏列
2013-01-22 17:49 671如果是动态隐藏的话:grid.getColumnModel() ... -
comboboxGrid多列
2013-01-21 17:16 839未完善版,后期将贴出完善版,完善版主要是封装了grid ... -
解决Ext2.0中ComboBox执行Filter第一次无效的问题
2013-01-16 16:45 782解决Ext2.0中ComboBox执行Filter第一次无效 ... -
decode encode
2013-01-07 15:49 560Ext中有两个很重要的方法, 一个是decode,一 ... -
ExtJS之Ext.Ajax.request用法
2013-01-07 13:04 1042原文出处http://javacrazyer.iteye ... -
Ext. 用XTemplate实现多列的ComboBox
2012-12-26 18:24 761原文出处http://blog.csdn.net/wanghu ... -
ExtJs中decode与encode
2012-12-10 18:03 606出自:http://blog.163.c ...
相关推荐
例如,`Ext.form.NumberField`的配置项包括`allowDecimals`、`allowNegative`、`decimalPrecision`等,用于控制数字输入的规则。而`Ext.form.TextArea`支持`growMax`和`growMin`,可以自动调整高度以适应输入内容。`...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
`Ext.ux.form.ColorPickerFieldPlus` 是一个由老外开发者重写的色彩选择器组件,它扩展了原生的Ext JS库中的`ColorPickerField`控件,为用户提供更加丰富的色彩选取体验。这个组件的目的是为了实现更自由、更接近...
DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...
文件内容可能包括定义新的配置选项、重写方法以处理用户交互、定义新的模板以显示不同的日期格式,以及注册事件处理器等。 分析`ExDateField.js`可以帮助我们更好地理解如何实现这些功能。例如,我们可以查找设置...
var textField = Ext.create('Ext.form.field.Text', { fieldLabel: '文本字段', id: 'readOnlyTextField' }); // 动态设置 readOnly 为 true textField.setReadOnly(true); ``` 在上述代码中,我们首先创建了一...
Ext.ux.form.TinyMCETextArea 是一个在Extjs4框架下实现的组件,它将TinyMCE编辑器集成到了ExtJS的表单控件中,提供了富文本编辑的功能。这个组件是基于HTML5构建的,因此在兼容性和功能上能够满足现代网页应用的...
1. **类定义**:创建一个新的DateField子类,可能命名为`MonthPicker`,继承自Ext.form.field.DateField。 2. **配置项**:定义新的配置选项,如`allowOnlyMonthYear`,用于开启只选择年月模式。 3. **模板修改**:...
#### 二、Ext JS Form控件概述 Ext JS的`Form`控件提供了一套丰富的API用于创建、管理和验证Web表单。该控件的核心特性包括: 1. **表单布局**:允许开发者轻松定义表单的布局方式。 2. **字段管理**:支持添加...
它提供了一种方便的方式来呈现和管理一组相关的输入控件,并且可以通过配置项进行自定义以适应不同的设计需求。以下是对FieldSet的一些关键配置项的详细解释: 1. **checkboxToggle**: 如果设置为`true`,FieldSet...
Ext.ux.DateTimeField控件已在Sencha论坛上浮动。 有一些补丁程序使其可用于5.1。 参见此处: : 什么有效 我得到了最新版本,将类重命名为更类似于当前的Ext 5.1架构,并修复了尝试选择时间控件时的错误。 过时的...
- **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...
日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式为横向的日期、时间,非日期弹出框下方选择时间。 注意事项:1、只有日期、年、月、日全部选择后,才能从name中...
"ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...
先有两种实现方式,一为重写Date.DatePicker和Ext.form.DateField控件的相应方法、另一种为单独做一个扩展扩建。 本JS文件在Ext3.1测试通过、若果要在高版本中使用,可参照例子重写相应源码的方法即可。
EXT JS 4 的日期控件(`Ext.form.field.Date`)通常用于让用户选择一个日期。默认情况下,它只显示日期部分,但通过扩展或配置,我们可以让它包含时间选择。这个控件基于浏览器的原生日期选择器进行增强,提供了一种...
ExtJS 是一个强大的JavaScript前端框架,它提供了丰富的用户界面组件,包括树形控件(tree)、表格(grid)和表单(form)。本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵...
1. **自定义类**:创建一个继承自EXTJS的`Ext.form.field.Text`的子类,比如`Ext.form.field.MoneyField`。这个类将包含处理金额格式化和验证的逻辑。 2. **模板**:定义一个模板来显示货币符号,如人民币的"¥"或...
- 这个类继承自`Ext.form.field.Date`,并通过添加新的配置选项和方法来实现时间和日期的综合选择。 - **依赖组件**:`Ext.zc.form.DateTimePicker` - 此组件负责展示日期时间选择器界面,提供用户交互操作。 ###...