最近根据公司需要要学习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,组件创建之后可以使用setActiveError或unsetActiveError进行修改 | |
activeErrorTpl | Ext.XTemplate | 错误信息魔板 | |
autoFitErrors | Boolean | 设置是否自动调节组件体范围,以便在组件范围内显示”side”或”under” 状态的错误信息,默认值true | |
fieldLabel | String | 设置字段标签,它将同labelSeparator一起被添加,它的位置尺寸决定于labelAlign ,labelWidth和 labelPad配置项,默认为undefined | |
hideEmptyLabel | String | 设置为true则自动隐藏内容为空的标签 | |
hideLabel | Boolean | 设置为true则完全隐藏表单标签(fieldLabel和labelSeparator),默认为false 注意: 不指定fieldLabel 的情况下,表单标签的位置依然会保留,设置为hideLabel为true则该位置将不被保留 | |
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 | 设置一个追加到当前值中的字符串,目的是计算预增长的字段宽度,并且仅当grow为true时生效,默认是大写字母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则隐藏滚动条,相当于设置overflow:hidden,默认为false |