本文共 10456 字,大约阅读时间需要 34 分钟。
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或者POSTreader : DataReader, //load时使用的数据读取器timeout : Number, //超时时间trackResetOnLoad : Boolean,//支持使用reset方法恢复原始值url : String //form要提交的url地址}add( Field field1, [Field field2], [Field etc] ) : BasicForm增加字段field1,field2,etcapplyIfToFields( Object values ) : BasicFormapplyToFields( 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对象取值到当前basicformmarkInvalid( Array/Object errors ) : BasicForm标志非法,[{id:'fieldId', msg:'The message'},...]这样格式的数组或者{id: msg, id2: msg2}格式的对象remove( Field field ) : BasicForm从basicform中移除fieldrender() : BasicForm在basicForm的fields中寻找,利用id属性检查他们,然后用id属性呼叫applyTo方法reset() : BasicForm重置所有值setValues( Array/Object values ) : BasicForm设置值,参见getValuessubmit( 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}构造很麻烦的,但还好我们一般不会直接使用fieldclearInvalid() : void清除非法信息getName() : StringgetRawValue() : MixedgetValue() : MixedisDirty() : voidisValid( Boolean preventMark ) : BooleanmarkInvalid( String msg ) : voidreset() : voidsetRawValue( Mixed value ) : voidsetValue( Mixed value ) : voidvalidate() : 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() : BooleaninitComponent() : voidsetValue( 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 : BooleanenableColors : BooleanenableFont : BooleanenableFontSize : BooleanenableFormat : BooleanenableLinks : BooleanenableLists : BooleanenableSourceEdit : BooleanfontFamilies : Array //这个当然要用汉字的字体组成的数组了}方法cleanHtml( String html ) : voidcreateToolbar( HtmlEditor editor ) : voidexecCmd( String cmd, [String/Boolean value] ) : voidgetDocMarkup() : voidgetToolbar() : Ext.ToolbarinsertAtCursor( String text ) : voidpushValue() : voidrelayCmd( String cmd, [String/Boolean value] ) : voidsyncValue() : voidtoggleSourceEdit( [Boolean sourceEdit] ) : voidupdateToolbar() : void要提一点的是,要使用HtmlEditor,别忘了先Ext.QuickTips.init();Ext.form.TextFieldconfig{ 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.TextAreaconfig{ 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旁边加了个下拉按钮,要自己实现onTriggerClickconfig{ autoCreate : String/Object, //{tag: "input", type: "text", size: "16", autocomplete: "off"} hideTrigger : Boolean //隐藏trigger,就是右边的那个下拉选择框 triggerClass : String}事件onTriggerClick( EventObject e ) : voidExt.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() : DatesetValue( String/Date date ) : voidExt.form.ComboBoxconfig{ 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() : voidexpand() : 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属性为valuesetValue( 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://dwqdi.baihongyu.com/