Ext.widgets-form(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField

本文详细介绍了Ext.form.BasicForm的使用方法及配置选项,包括如何提交表单、验证字段、加载记录等功能,并提供了实例说明。
Ext.form.BasicForm
对应一个dom中的form,默认是用ajax提交的,如果的确想回传,可以使用如下方式
var myForm = new Ext.form.BasicForm("form-el-id", {
onSubmit: Ext.emptyFn,
submit: function() {
this.getEl().dom.submit();
}
});

方法:
BasicForm( Mixed el, Object config )
其中config配置为
{
baseParams : Object, //请求时的附加参数,格式为{id: '123', foo: 'bar'}
errorReader : DataReader, //提交时发生验证错误,这个dataReader将会被使用
fileUpload : Boolean, //支持文件上传
method : String, //GET或者POST
reader : DataReader, //load时使用的数据读取器
timeout : Number, //超时时间
trackResetOnLoad : Boolean,//支持使用reset方法恢复原始值
url : String //form要提交的url地址
}

add( Field field1, [Field field2], [Field etc] ) : BasicForm
增加字段field1,field2,etc


applyIfToFields( Object values ) : BasicForm
applyToFields( Object values ) : BasicForm
用传入的values呼叫Ext.applyIf/apply 方法

clearInvalid() : BasicForm
清除当前basicform中所有的非法信息

doAction( String/Object actionName, [Object options] ) : BasicForm
执行预定义的动作actionName,actionName类似"submit","load",也可以是自定义的动作的名字或一个Ext.form.Action的实例,options类似如下对象{
url :String,
method :String,
params :String/Object,
success :Function,
failure :Function,
clientValidation :Boolean
}

findField( String id ) : Field
在当前form中查找id/dataindex/name等于传入的id的field对象

getEl() : Ext.Element
得到当前form对象的element对象


getValues( Boolean asString ) : Object
得到当前form的fields {name:value,name:values}json对象,如果有同名多值,value将是一个数组

isDirty() : Boolean
从初始载入后,是否有field被修改过

isValid() : Boolean
客户端验证成功?

load( Object options ) : BasicForm
等效于doAction('load',options);

loadRecord( Record record ) : BasicForm
从一个record对象取值到当前basicform

markInvalid( Array/Object errors ) : BasicForm
标志非法,[{id:'fieldId', msg:'The message'},...]这样格式的数组或者{id: msg, id2: msg2}格式的对象

remove( Field field ) : BasicForm
从basicform中移除field

render() : BasicForm
在basicForm的fields中寻找,利用id属性检查他们,然后用id属性呼叫applyTo方法

reset() : BasicForm
重置所有值

setValues( Array/Object values ) : BasicForm
设置值,参见getValues

submit( Object options ) : BasicForm
提交表单

updateRecord( Record record ) : BasicForm
利用当前更新record对象,参见loadRecord

事件:
actioncomplete : ( Form this, Action action )
actionfailed : ( Form this, Action action )
beforeaction : ( Form this, Action action )


Ext.form.Field
有了form之后,我们当然还需要field
方法:
Field( Object config )
其中config设置为{
autoCreate : String/Object, //一个{tag: "input", type: "text", size: "20", autocomplete: "off"}这样的对象,或者选 择true,就是前面所说的那个固定内置对象
clearCls : String, //,默认x-form-clear-left
cls : String, //默认样式
disabled : Boolean,
fieldClass : String //x-form-field
fieldLabel : String
focusClass : String //x-form-focus
hideLabel : Boolean //隐藏前导标签
inputType : String //input type="???"
invalidClass : String //x-form-invalid
invalidText : String
itemCls :String
labelSeparator : String //分隔符
msgFx : String
msgTarget : String
name : String
readOnly : Boolean
tabIndex : Number
validateOnBlur : Boolean //true
validationDelay : Number //250
validationEvent : String/Boolean //KeyUP
value : Mixed
}

构造很麻烦的,但还好我们一般不会直接使用field

clearInvalid() : void
清除非法信息

getName() : String
getRawValue() : Mixed
getValue() : Mixed
isDirty() : void
isValid( Boolean preventMark ) : Boolean
markInvalid( String msg ) : void
reset() : void
setRawValue( Mixed value ) : void
setValue( Mixed value ) : void
validate() : Boolean

都很简单也略过了
事件
blur : ( Ext.form.Field this )
change : ( Ext.form.Field this, Mixed newValue, Mixed oldValue )
focus : ( Ext.form.Field this )
invalid : ( Ext.form.Field this, String msg )
specialkey : ( Ext.form.Field this, Ext.EventObject e )
valid : ( Ext.form.Field this )

Ext.form.Checkbox
继承自Field, 复选框

Checkbox( Object config )
构造,其中config{
autoCreate : String/Object,
boxLabel : String,
checked : Boolean,
fieldClass : String,//x-form-field
focusClass : String,
}

getValue() : Boolean
initComponent() : void
setValue( Boolean/String checked ) : void

事件
check : ( Ext.form.Checkbox this, Boolean checked )

Ext.form.Radio
继承自Ext.form.Checkbox,单选框
多了一个方法
getGroupValue() : String
如果单选框是一组radio 的一部分,取当前选中的值

Ext.form.Hidden
继承自Field,隐藏字段,无新特性


Ext.form.HtmlEditor
继承自Field,这个htmleditor功能太简单了,什么人能扩充一下就好了

config定义{
createLinkText : String //
defaultLinkValue : String // http://
enableAlignments : Boolean
enableColors : Boolean
enableFont : Boolean
enableFontSize : Boolean
enableFormat : Boolean
enableLinks : Boolean
enableLists : Boolean
enableSourceEdit : Boolean
fontFamilies : Array //这个当然要用汉字的字体组成的数组了
}

方法

cleanHtml( String html ) : void
createToolbar( HtmlEditor editor ) : void
execCmd( String cmd, [String/Boolean value] ) : void
getDocMarkup() : void
getToolbar() : Ext.Toolbar
insertAtCursor( String text ) : void
pushValue() : void
relayCmd( String cmd, [String/Boolean value] ) : void
syncValue() : void
toggleSourceEdit( [Boolean sourceEdit] ) : void
updateToolbar() : void


要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init();



Ext.form.TextField
config{
allowBlank : Boolean //允许为空
blankText : String //如果为空验证错误时的提示文字 ,默认This field is required
disableKeyFilter : Boolean
emptyClass : String
emptyText : String
grow : Boolean // 自动生长?,如果需要,会加宽当前input type="text"
growMax : Number
growMin : Number
maskRe : RegExp //仅允许输入与maskRe匹配的按键
maxLength : Number
maxLengthText : String //超出最大长度时提示文本
minLength : Number
minLengthText : String //不够最小长度时提示信息
regex : RegExp //正则匹配
regexText : String //提示
selectOnFocus : Boolean
validator : Function //自定义验证方法,接受当前字段的值,如果合法,返回真,反之返回自定义信息
vtype : String //Ext.form.VTypes 中定义的vtype类型名,支持简单的类型验证
vtypeText : String//如果不是,则提示
}

方法:
TextField( Object config )
构造

autoSize() : void
自动尺寸

reset() : void
重置

selectText( [Number start], [Number end] ) : void
选择文本

validateValue( Mixed value ) : Boolean
验证值
[Open Browser Console for more detailed log - Double click to close this message] Failed to load model class 'LeafletMapModel' from module 'jupyter-leaflet' Error: No version of module jupyter-leaflet is registered at WidgetManager.loadClass (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-renderers-1.3.0/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:2457634) at WidgetManager.loadClass (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-renderers-1.3.0/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:2841448) at WidgetManager.loadModelClass (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-renderers-1.3.0/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:2454419) at WidgetManager._make_model (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-renderers-1.3.0/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:2452380) at WidgetManager.new_model (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-renderers-1.3.0/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:2450099) at WidgetManager.handle_comm_open (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-renderers-1.3.0/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:2448870) at https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-renderers-1.3.0/out/node_modules/%40vscode/jupyter-ipywidgets8/dist/ipywidgets.js:2:2840461 at t._handleCommOpen (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-2025.9.1-win32-x64/dist/webviews/webview-side/ipywidgetsKernel/ipywidgetsKernel.js:3:119000) at async t._handleMessage (https://file+.vscode-resource.vscode-cdn.net/c%3A/Users/12432/.vscode/extensions/ms-toolsai.jupyter-2025.9.1-win32-x64/dist/webviews/webview-side/ipywidgetsKernel/ipywidgetsKernel.js:3:120875)地图没有显示
12-03
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值