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
验证值
Ext.form.NumberField
继承自Ext.form.TextField,因为Ext.form.TextField虽然强大,但写起来的确还是有点麻烦,后面的类都继承自Ext.form.TextField,没有自定义的方法,属性和事件
config定义为{
allowDecimals : Boolean //true
allowNegative : Boolean //true
baseChars : String //'0123456789'
decimalPrecision : Number //精度,默认值2
decimalSeparator : String //小数分隔符
fieldClass : String //默认样式为x-form-field x-form-num-field
maxText : String
maxValue : Number //默认Number.MAX_VALUE
minText : String
minValue : Number //默认Number.NEGATIVE_INFINITY
nanText : String //NaN时显示?
}
Ext.form.TextArea
config{
autoCreate : String/Object //{tag: "textarea", style: "width:100px;height:60px;", autocomplete: "off"}
growMax : Number //1000
growMin : Number //60
preventScrollbars : Boolean //如果为真等于设置overflow: hidden,默认为false
}
Ext.form.TriggerField
这个类只要text旁边加了个下拉按钮,要自己实现onTriggerClick
config{
autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"}
hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框
triggerClass : String
}
事件
onTriggerClick( EventObject e ) : void
Ext.form.DateField
继承自TriggerField,用于日期选择
config{
altFormats : String //转换用户输入到日期时的格式,默认'm/d/Y|m-d-y|m-d-Y|m/d|m-d|d'
autoCreate : String/Object //{tag: "input", type: "text", size: "10", autocomplete: "off"}
disabledDates : Array //禁止选择的日期:例 ["^03","04/../2006","09/16/2003"],不让选3月,2006年4月,2003年9月16
disabledDatesText : String //不让选总得给个理由吧
disabledDays : Array //不让选星期几,例[0,6],不让选周六,周日
disabledDaysText : String //周日要休息,这就是理由
format : String //显示时的格式
invalidText : String //验证非法时的提示
maxText : String
maxValue : Date/String
minText : String
minValue : Date/String
triggerClass : String
}
方法,除了构造,多了两个顾名思义的方法
DateField( Object config )
getValue() : Date
setValue( String/Date date ) : void
Ext.form.ComboBox
config{
allQuery : String //''
autoCreate : Boolean/Object //{tag: "input", type: "text", size: "24", autocomplete: "off"}
displayField : String //显示字段
editable : Boolean //true当然就是combobox了,如果不可编辑就是一个select了
forceSelection : Boolean
handleHeight : Number //如果resiable为真时,设置
hiddenName : String
lazyInit : Boolean //除非得到焦点才开始初始化列表,默认为真
lazyRender : Boolean //除非请求,才开始输出,默认为假
listAlign : String //对齐方式,参见Ext.Element.alignTo,默认为'tl-bl'
listClass : String
listWidth : Number
loadingText : String //仅当mode = 'remote'时调用数据时显示的文本
maxHeight : Number //300
minChars : Number //最少输入多少个字开始响应,远程时默认为4,本地为0,如果不可编辑则此值无效
minListWidth : Number
mode : String //可选值local/remote之一,从本地还是远程取数据
pageSize : Number //在远程模式下,如果此值大于0会在底部显示一个翻页工具条
queryDelay : Number //查询延时,远程默认为500,本地10
queryParam : String //查询参数,默认为query
resizable : Boolean
selectOnFocus : Boolean
selectedClass : String
shadow : Boolean/String //True或"sides"为默认风格, "frame" for 4-way shadow, and "drop" for bottom-right
store : Ext.data.Store
title : String
transform : Mixed //对应一个select元素,可以将select转为combobox对象
triggerAction : String //点击按钮时的动作.默认为query
triggerClass : String
typeAhead : Boolean //false
typeAheadDelay : Number //250
valueField : String
valueNotFoundText : String //值不存在时的提示信息
}
属性
view : Ext.DataView
方法
ComboBox( Object config )
构造
clearValue() : void
清除所有文本/值对
collapse() : void
expand() : void
收起/展开下拉列表
doQuery( String query, Boolean forceAll ) : void
执行查询
getValue() : String
选择当前字段的值
isExpanded() : void
下拉列表是展开的?
select( Number index, Boolean scrollIntoView ) : void
选中第index列表项
selectByValue( String value, Boolean scrollIntoView ) : Boolean
选中值为value的列表项
setEditable( Boolean value ) : void
设editable属性为value
setValue( String value ) : void
设置当前值为
事件
beforequery : ( Object queryEvent )
beforeselect : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
collapse : ( Ext.form.ComboBox combo )
expand : ( Ext.form.ComboBox combo )
select : ( Ext.form.ComboBox combo, Ext.data.Record record, Number index )
示例：
//定义一个变量
var sel;
Ext.onReady(function(){
// simple array store
Ext.exampledata.provinces = [[ ' ', '全部 '], [ 'BJ ', '北京 '], [ 'SH ', '上海 ']];
var store = new Ext.data.SimpleStore({
fields: [ 'code ', 'label '],
data : Ext.exampledata.provinces
});
//initialize a combobox object
combo = new Ext.form.ComboBox({
store: store, //datasource
valueField: 'code ',
displayField: 'label ', //display field
typeAhead: true, //自动将第一个搜索到的选项补全输入
mode: 'local ',
triggerAction: 'all ',
emptyText: '全部 ',
selectOnFocus:true,
resizable:true,
forceSelection:true
});
combo.applyTo( 'province ');
//使用comboboxselect事件,提交的时候，提交sel就好了
combo.on('select',myFun);
function myFun(c,r,i)
{
sel = r.get('code');
}
Ext.form.TimeField
继承自combobox,用于选择时间
config{
altFormats : String //
format : String
increment : Number //时间增长间隔,默认15
invalidText : String
maxText : String
maxValue : Date/String
minText : String
minValue : Date/String
}
总的来说Ext.form对input type='text' select 这样的输入标签都有对应的类,并对有些标签做了简单的扩展,当然很重要的一点,漂亮多了,vtype属性也方便了处理,建议有兴趣的同胞对Ext.form.VTypes和Ext.form.HtmlEditor做一些扩展
form中还有两个类,比如下例中的FormPanel和FieldSet,
都继承自panel,所以会放在panel中解释
////----------------------------------------------------------------------------------------------------------
综合实例：
http://hi.baidu.com/capchin/blog/item/36af27940620ca1ad31b701c.html