Ext 各项配置表

                    

 最近根据公司需要要学习ExtJs  但是这个组件太多了 一时间又不能全部记住 就自己找书上的整理了下  才整理一点

有这方面的大牛是否可以指导下学习ExtJs的方法。

 

 

                              4-1 Ext.form.Basic主要配置项目表

配置项

类型

说明

api

Object

如果设置了该配置项,将使用Ext.form.action.DirectLoad处理表单数据的提交和加载,例如

  api:{

      load:App.ss.MyProfile.load,

      submit.App.ss.Myprofile.submit

}

baseParams

Object

传递到所有请求中的基本参数,例如

{id : ’123’,foo : ”bar”} 参数将被Ext.urlEncode方法编码

paramsAsHash

Boolean

当使用API加载表单时,如果为true则参数将被作为一个单独的hash集合传递到服务端,默认为false

paramOrder

Array / String

当使API加载表单时,paramOrder决定了参数传递的顺序,有效的配置格式如下:

paramOrder : [ “param1” , “param2” , “param3” ]

paramOrder :  “param1”  “param2”  “param3” 

paramOrder :  “param1” , “param2” , “param3”

paramOrder : “param1”| “param2” | “param3” 

standardSubmit

Boolean

设置表单是否采用标准方式提交,默认false采用Ajax方式提交。

errorReader

DateReader

表单提交时读取错误信息的一个数据读取器,不是必选项,在表单内部已经建立了一个JSON格式的数据读取器

method

String

设置表单的提交方式,有效值包括 ”GET” 和 ”POST”

reader

DateReader

设置表单执行load操作时读取数据的一个数据读取器,不是必选项,在表单内已经建立了一个 JSON格式的数据读取器

timeout

Number

设置表单动作的超时时间,默认是30s

trackResetOnload

Boolean

设置为true则表单的原始值随着load数据或者是setValues()方法而更新。原始值只是表单读取数据的原始状态,用于同当前值进行对比,来判断是否有数据进行了修改

url

String

设置表单执行请求时默认的提交路径

waitMsgTarget

Mixed

默认情况下,表单执行动作过程当中的等待提示框是一个Ext.MessageBox.wait组件,通过该属性可以指定其他目标元素


 

 

4-2   Ext.form.Basic 常用方法表

方法名

说明

checkDirty:Void

检查表单是否为脏状态,改方法会触发dirtychange事件

checkValidity:Vold

检查该表单是否有效,改方法会触发validitychange事件

clearlnvalid():Ext.form.Basic

清除表单中的无效验证信息

doAction(String/Object , action-name , [Object options] )

执行一个预定的动作:Ext.form.action.Action 包括

Ext.form.action.Load

Ext.form.action.DirectLoad

Ext.form.action.Submit

Ext.form.action.StandardSubmit

Ext.form.action.DirectSubmit

findField( String id )

通过id查找表单字段

getFields

获得表单容器中所有表单字段组件集合

getValues([Boolean asString],[Boolean dirtyOnly],[Boolean includeEmptyText])  String/Object

获得表单容器中所有表单字段的键值对集合,如果有多个相同名称的字段则返回一个数组

参数说明:

asString : true则返回键值对的字符串表示,默认为false

dirtyOnly:true 则返回脏字段,默认为false

includeEmptyText: true 则对空字段使用emptyText配置项,默认为flase

 

hasInvalidField : Boolean

如果表单中包含无效字段则返回true

hasUpload : Boolean

如果表单中包含文件上传字段则返回true

isDirty() : Boolean

如果表单当前值与原始值不同则返回true,需要注意的是,当trackReset-OnLoad配置为true时,表单的原始值会在load数据时更新

isValid() : Boolean

如果客户端验证成功则返回true,否则返回false

load(Object options ) : Ext.form.Basic

执行表单的读取动作,配置对象options将被传递到action(动作)当中,细节请参考doAction配置项

loadRecord(Ext.data.Model record ) : Ext.form.Basic

从一个数据记录(Ext.data.Model)中读取数据到表单中

markInvalid(Array/Object errors) : Ext.form.Basic

成批设置表单字段为验证无效,参数可以是数组[{ id : “fieldId”,msg :”The message”}, ......],或者是JSONduixiang {id:msg,id2:msg2 }

reset() : BasicForm

重置表单

SetValues(Array/Object values) : Ext.form.Basic

成批设置表单字段值,参数可以是数组[{id : “name”,value:”tom ”},{id:”age”,value:”24”}], 也可以是JSON对象 {id:value ,id2,value2 }

submit(Object options): Ext.form.Basic

执行表单的提交动作。配置对象options 将被传递到action( 动作) 当中,细节请参考doAction 配置项

updateRecord(Ext.data.Model) : Ext.form.Basic

持久化表单数据到Ext.data.Model

 

 4-4 Ext.form.FormPanel支持的主要表单组件

ExtJs表单组件

说明

Xtype类型

Ext.form.field.Checkbox

复选框

checkboxfield

Ext.form.field.CheckboxGroup

复选框组

checkboxgroup

Ext.form.field.ComboBox

下拉列表框

combo

Ext.form.field.Date

日期选择框

datefield

Ext.form.field.Display

文本展示组件

displayfield

Ext.form.Field.Container

字段容器

fieldcontainer

Ext.form.Field.Set

字段集

fieldset

Ext.form.field.Hidden

隐藏域

hiddenfield

Ext.form.field.HtmlEditor

HTML文本编辑器

htmleditor

Ext.form.Label

标签字段

label

Ext.form.field.Number

数字输入框

numberfield

Ext.form.field.Radio

单选框

radio

Ext.form.RadioGroup

单选框组

radiogroup

Ext.form.field.Spinner

微调组件

spinnerfield

Ext.form.field.TextArea

多行文本框

textarefield

Ext.form.field.Text

单行文本框

textfield

Ext.form.field.Time

时间选择框

timefield

Ext.form.field.Trigger

触发按钮文本框

triggerfield

Ext.form.field.File

文件上传字段

filefield

 

4-5 Ext.form.FormPanel主要配置项目表

配置项

类型

说明

buttons

Array

一个按钮(Ext.button.Button)配置对象的数组,按钮将被添加到表单页脚当中

示例代码:buttons[{text:”Button1”}]

layout

String

表单布局,默认为anthor

minButtonWidth

Number

表单按钮的最小宽度,默认为75像素

pollForChanges

Boolean

是否循环检查表单值得变化

pollInterval

Number

循环检查表单的时间间隔默认为500毫秒

items

Mixed

一个子元素或者子元素的数组

title

String

表单标题

 

4-6  Ext.form.FormPanel常用方法表

方法名

说明

checkChange:Void

强制检查每个表单字段是否发生了变化

getForm() : Ext.form.BasicForm

获取表单面板对应的基本表单对象

load(Object options):void

加载表单的内容,该方法是Ext.form.Basic-load的代理,详细内容请参考Ext.form.Basic-load方法的相关说明

startPolling(Number interval): Void

开始循环检查表单是否发生变化

参数说明:

inteerval : 循环检查的时间,单位是毫秒

stopPolling : Void

停止startPolling启动的内置任务

submit(Obiect options)

提交表单内容,该方法是Ext.form.Basic-submit的代理,详细内容请参考Ext.form.Basic-submit的相关说明

 

 

 

4-7  Ext.form.field.Base 主要配置项目表

 

配置项

类型

说明

dirtyCls

String

设置表单值被修改之后的样式

fieldCls

String

设置表单字段的样式,默认为’x-form-field’

focusCls

String

设置表单字段获得焦点时的样式,默认为” x-form-focus”

id

String

控件的唯一标识,默认系统会自动生成一个唯一标识

inputId

String

这个id将被应用于生成的input元素,默认情况下这个id将被自动生成,如果手工配置了这个id则应保证这个id的唯一性

invalidText

String

设置表单字段值无效并且没有提供信息的提示文字

inputText

String

字段类型,默认为text

name

String

字段名(数据提交到后台的名称),默认为undefined

readOnly

Boolean

设置字段是否只读,默认为false.该属性只设置HTML元素只读,并不禁用组件的其他功能,例如日期选择框的触发按钮依然可以正常使用,这就可以实现强制用户选择的功能

Mixin :Ext.form.field.Field

disabled

Boolean

true则禁用组件,默认为false.禁用状态下的组件将不被提交

submitValue

Boolean

设置表单字段非禁用状态下是否提交表单值,默认为false

validateOnChange

Boolean

设置是否在值发生变化时立即检验值得有效性,默认为false

value

Mixed

字段的初始化值

Mixin:Ext.form.Labelable

activerror

String

如果设置该值,则组件第一次被渲染时该值将被作为错误信息提示,默认值为undefined,组件创建之后可以使用setActiveErrorunsetActiveError进行修改

activeErrorTpl

Ext.XTemplate

错误信息魔板

autoFitErrors

Boolean

设置是否自动调节组件体范围,以便在组件范围内显示”side”或”under” 状态的错误信息,默认值true

fieldLabel

String

设置字段标签,它将同labelSeparator一起被添加,它的位置尺寸决定于labelAlign ,labelWidthlabelPad配置项,默认为undefined

hideEmptyLabel

String

设置为true则自动隐藏内容为空的标签

hideLabel

Boolean

设置为true则完全隐藏表单标签(fieldLabellabelSeparator,默认为false

注意: 不指定fieldLabel 的情况下,表单标签的位置依然会保留,设置为hideLabeltrue则该位置将不被保留

labelPad

Number

设置表单标签与表单字段直接的空白间距,默认为5像素

labelSeparator

String

设置表单标签与表单字段之间的分隔符

labelStyle

String

设置一个直接应用于标签元素的样式字符串,默认为undefined

labelWidth

Number

设置表单标签宽度,仅当labelAlign设置为”left”或者”right”是生效,默认为100像素

labellabelRenderTpl

Array/String/Ext.XTemplate

表单标签模板

msgTarget

String

设置错误信息提示位置,有效值包括:

qtip : 显示一个浮动的提示信息

title : 显示一个浏览器的浮动提示信息

under : 在字段的下方显示一个提示信息

side : 在字段的右边显示一个提示信息

none : 不显示提示信息

[ element id ] : 直接将错误信息添加到指定元素的interHTML属性

 

preventMark

Boolean

true 则不显示错误信息 , 默认为false

 

4-8  Ext.form.field.Text组件 主要配置项目表

 

配置项

类型

说明

allowBlank

Boolean

是否允许为空,默认为false

blankText

String

是否允许验证失败后显示的提示信息

disableKeyFilter

Boolean

设置为true则禁用键盘输入过滤,默认false

emptyCls

String

设置应用于空字段的样式,默认为 ” x-form-empty-field”,这个样式会依据当前字段值自动进行添加或移除

emptyText

String

在一个空字段中显示默认的提示信息

enableKeyEvents

Boolean

是否启用键盘事件代理,默认为false

enforceMaxLength

Boolean

是否强制限制输入的最大长度,默认为false,设置为true则用户无法输入超过最大的字符

grow

Boolean

设置字段是否根据内容字段进行伸展和收缩,默认为false

growAppend

String

设置一个追加到当前值中的字符串,目的是计算预增长的字段宽度,并且仅当growtrue时生效,默认是大写字母W

growMax

Number

字段伸展的最大宽度,默认为800

growMin

Number

字段收缩的最小宽度,默认是30

maskRe

RegExp

一个输入掩码的正则表达式,它将过滤掉不匹配的键盘输入

maxLength

Number

字段允许输入的最大长度,默认为Number.MAX_VALUE

说明:

enforceMaxLength设置为false时,输入超长会出现错误提示

enforceMaxLength设置为true时,输入被限制在范围内,不出现提示

maxLengthText

String

最大长度验证失败后显示的提示信息

minLength

Number

字段允许输入的最小长度,默认为0

minLengthText

String

最小长度验证失败后显示的提示信息

regex

RegExp

一个用于验证的javaScript正则表达式

regexText

String

正则表达式验证失败后显示的提示信息,默认为空

sclectOnFocus

Boolean

设置字段得到焦点时是否自动选择已存在的文本。默认是false

validator

Function

一个自定义验证函数,当前值将被传入,验证通过返回true,验证失败返回错误信息

vtype

String

一个验证类型的名字,请参考Ext.form.VTypes

vtypeText

String

一个自定义的提示信息,用来代替vtype本身的错误信息

 

4-9  Ext.form.field.TextArea 主要配置项目表

配置项

类型

说明

cols

Number

设置textarea组件的原始cols属性,默认为4

enterIsSpecial

Boolean

设置是否允许输入控制字符

growAppend

String

默认追加一个新行

growMax

Number

字段伸展的最大高度,默认为1000

growMin

Number

字段收缩的最小高度,默认为60

PreventScrollbars

Boolean

设置当文本内容溢出时是否显示滚动条,设置为true则隐藏滚动条,相当于设置overflowhidden,默认为false

 

 

 

转载于:https://www.cnblogs.com/pangguo710/p/7525176.html

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值