Ext form表单中各种属性应用详解
Ext.form表单中各种属性应用详解 继承自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:100pxheight: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/Ym-d-ym-d-Ym/d
html input type属性m-dd autoCreate : String/Object //tag: input type: text size: 10 autocomplete: off disabledDates : Array //禁止选择的日期:例 0304/../200609/16/2003不让选3月2006年4月2003年9月16 disabledDatesText : String //不让选总得给个理由吧 disabledDays : Array //不让选星期几例06不让选周六周日 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 : O
bject 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 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 typetext select 这样的输入标签都有对应的类并对有些标签做了简单的扩展当然很重要的一点漂亮多了vtype属性也方便了处理建议有兴趣的同胞对 Ext.form.VTypes和Ext.form.HtmlEditor做一些扩展 form中还有两个类比如下例中的FormPanel和FieldSet 都继承自panel所以会放在panel中解释 综合示例 Ext.QuickTips.init var arr 1 本.拉登 2 笨.拉登3 笨.拉灯 var reader new Ext.data.ArrayReader ...id: 0 ...name: value ...name: key var storenew Ext. reader:reader store.loadDataarr var htmleditornew Ext. fieldLabel:htmleditor width:450 fontFamilies:宋体隶书 name:editor id:editor var form new Ext. labelWidth: 75 url:post.php frame:true width: 800 defaultType: textfield items: new Ext. //checkbox fieldLabel:checkbox nam
e:cb checked:true boxLabel:checkbox new Ext. //radio border:false title:radio items: new Ext. labelSeparator: name:radio checked:true boxLabel:radio 1 new Ext. labelSeparator: name:radio checked:true boxLabel:radio 2 new Ext. //hidden name:hidden htmleditor new Ext. //text fieldLabel:text name:text grow:true allowBlank:false blankText : 这个字段最好不要为空 maskRe:/a-zA-z/gi new Ext. //NumberField allowNegative:true fieldLabel:number name:number new Ext. //TextArea fieldLabel:textarea name:textarea new Ext. //TriggerField fieldLabel:TriggerField name:TriggerField new Ext. //select fieldLabel:select editable:false triggerAction: all valueField:value displayField:key mode: local store:store new Ext. //combobox fieldLabel:ComboBox displayField:key mode: local store:store new Ext. //DateField fieldLabel:DateField format:Y-m-d disabledDays:06 new Ext.//TimeField fieldLabel:TimeField mode: local increment:derdocument.body htmleditor.setRawValuehello world htmleditor.syncValue

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。