`

Ext.form各类控件的配置及方法

    博客分类:
  • ext
ext 
阅读更多

Ext.form各类控件的配置及方法

1、Ext.form.Action

     配置项: 

          success:执行成功后回调的函数,包括两个参数:form和action 

          failure:执行失败后回调的函数,包括两个参数:form和action 

          method:表单的提交方式,有效值包括GET、POST 

          params:传递到请求中的参数 

          url:动作提交的路径 

          waitMsg:动作执行时显示的等待信息 

     属性: 

          Action.CLIENT_INVALID:客户端验证错误 

          Action.CONNECT_FAILURE:通信错误 

          Action.LOAD_FAILURE:加载数据时,没有包含data属性的字段被返回 

          Action.SERVER_INVALID:服务端验证错误 

          failureType:错误类型 

          result:包含布尔类型的success属性和其他属性,如{success: true, msg: 'ok'} 

          type:动作类型,可选值有submit和load 

               Ext.form.Action.Submit:返回的信息中要包含一个布尔类型的success属性和一个可选的errors属性 

               Ext.form.Action.Load:返回的信息中要包含一个布尔类型的success属性和一个data属性

2、Ext.form.BasicForm

     配置项: 

          baseParams:传递到请求中的参数 

          method:表单的提交方式,有效值包括GET、POST 

          url:表单默认的提交路径 

          fileUpload:表单是否进行文件上传 

          timeout:表单动作的超时时间,默认为30秒 

          trackResetOnLoad:是否在表单初次创建时清楚数据 

    方法: 

          doAction( String/Object actionName, [Object options] ):执行一个预订的动作,可用选项包括: 

              url:动作提交的路径 

              method:表单的提交方式,有效值包括GET、POST 

              params:传递到请求中的参数 

              headers: 

              success:执行成功后回调的函数,包括两个参数:form和action 

              failure:执行失败后回调的函数,包括两个参数:form和action 

              clientValidation:是否客户端验证 

          clearInvalid():清除表单中所有的无效验证信息 

          findField( String id ):查找表单字段 

          getValues( [Boolean asString] ): 

          isDirty():表单数据是否被更改过 

          isValid():客户端验证是否成功 

          load( Object options ):执行表单读取动作 

          loadRecord( Record record ):从一个数据记录中读取数据到表单中 

          markInvalid( Array/Object errors ):成批设置表单字段为验证无效 

          reset():重置表单 

          setValues( Array/Object values ):成批设置表单字段值 

          submit( Object options ):执行表单提交动作 

          updateRecord( Record record ):持久化表单数据到记录集中

3、Ext.form.FormPanel

     配置项: 

          items:一个元素或元素数组 

          buttons:一个按钮配置对象的数组,按钮将被添加到表单页脚中 

          buttonAlign:按钮的对齐方式,可选值有left、center、right,默认为center 

          labelWidth:表单标签的宽度 

          labelAlign:表单标签的对齐方式,可选值有left、top、right,默认为left 

          labelSeparator:字段标签与字段之间的分隔符,默认为':' 

          minButtonWidth:按钮的最小宽度,默认为75 

     方法: 

          getForm() : Ext.form.BasicForm 

          load( Object options ) 

          startMonitoring() 

          stopMonitoring()

4、Ext.form.Field

    配置项: 

          name:字段名 

          value:字段的初始化值 

          disabled:字段是否不可用,默认为false 

          fieldLabel:字段标签说明 

          hideLabel:隐藏字段标签,默认为false 

          labelSeparator:字段标签与字段之间的分隔符,默认为':' 

          labelStyle:字段标签样式 

          inputType:默认为text 

          invalidClass:默认为x-form-invalid 

          invalidText:字段非法文本提示 

          msgTarget:错误信息显示的位置,默认为qtip 

              qtip:显示一个浮动的提示信息 

              title:显示一个浏览器的浮动提示信息 

              under:在字段下方显示一个提示信息 

              side:在字段右边显示一个提示信息 

          readOnly:字段是否只读,默认为false 

          validateOnBlur:字段在失去焦点时被验证,默认为true 

     方法: 

          clearInvalid(): 

          getRawValue() 

          setRawValue( Mixed value ) 

          getValue() 

          setValue( Mixed value ) 

          isDirty():字段值在装载后是否被修改过 

          isValid( Boolean preventMark ):当前字段值是否合法 

          markInvalid( [String msg] ) 

          validate() 

          reset()

5、Ext.form.Hidden

6、Ext.form.Label

     配置项:

          html:

          text:

7、Ext.form.TextField

     配置项: 

          allowBlank:是否允许为空,默认为true 

          blankText:空验证失败后显示的提示信息 

          emptyText:在一个空字段中默认显示的信息 

          grow:字段是否自动伸展和收缩,默认为false 

          growMin:收缩的最小宽度 

          growMax:伸展的最大宽度 

          inputType:字段类型:默认为text 

          maskRe:用于过滤不匹配字符输入的正则表达式 

          maxLength:字段允许输入的最大长度 

          maxLengthText:最大长度验证失败后显示的提示信息 

          minLength:字段允许输入的最小长度 

          minLengthText:最小长度验证失败后显示的提示信息 

          regex:正则表达式 

          regexText:正则表达式验证失败后显示的提示信息 

          vtype:验证类型的名字 

               alpha:限制只能输入字母 

               alphanum:限制只能输入字母和数字 

               email 

               url 

          vtypeText:验证失败时的提示信息 

          validator:自定义验证函数 

          selectOnFocus:当字段得到焦点时自动选择已存在的文本,默认为false

8、Ext.form.TextArea 

      配置项: 

           preventScrollbars:是否禁止出现滚动条,默认为false

9、Ext.form.NumberField 

      配置项: 

           allowDecimals:是否允许输入小数,默认为true 

           allowNegative:是否允许输入负数,默认为true 

           baseChars:输入的有效数字集合,默认为'0123456789' 

           decimalPrecision:数字的精度,默认保留小数点后2位 

           decimalSeparator:十进制分隔符,默认为'.' 

           maxValue:允许输入的最大数值 

           maxText:超过最大值之后的提示信息 

           minValue:允许输入的最小数值 

           minText:超过最小值之后的提示信息 

           nanText:输入非有效数值之后的提示信息

10、Ext.form.Checkbox 

      配置项: 

           boxLabel:复选框的文字描述 

           checked:复选框是否被选择,默认为false 

           handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked 

           inputValue: 

     方法: 

           getValue():返回复选框的checked状态 

           setValue( Boolean/String checked ):

11、Ext.form.CheckboxGroup 

     配置项: 

           allowBlank:是否允许不选择,默认为true 

           blankText: 

           columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数) 

           items:对象数组 

           vertical:是否垂直方向显示对象,默认为false

12、Ext.form.Radio 

     方法: 

           getGroupValue(): 

           setValue( value {String/Boolean} ):

13、Ext.form.RadioGroup 

     配置项: 

           allowBlank: 

           blankText:

14、Ext.form.ComboBox 

      配置项: 

           displayField:被显示在下拉框中的字段名 

           editable:是否可编辑,默认为true 

           forceSelection:输入值是否严格为待选列表中存在的值。如果输入不存在的值,会自动选择第一个最接近的值。 

           hiddenName:隐藏字段的名字,如果提供该参数则一个隐藏字段将被创建,用来存储所选值,当表单提交时在服务器端可以通过该名字取得列表中的所选值 

           listWidth:下拉列表的宽度 

           minListWidth:下拉列表的最小宽度,默认为70像素 

           loadingText:当下拉框加载数据时显示的提示信息,只有当mode='remote'时才会生效 

           maxHeight:下拉列表框的最大高度,默认为300像素 

           minChars:下拉列表框自动选择前用户需要输入的最小字符数量。mode='remote'默认为4,mode='local'默认为0 

           mode:下拉列表框的数据读取模式。remote读取远程数据,local读取本地数据 

           pageSize:下拉列表框的分页大小。该项设置只在mode='remote'时生效 

           queryParam:查询的名字,默认为'query',将被传递到查询字符串中 

           allQuery:一个发往服务器用来查询全部信息的查询字符串,默认为空字符串'' 

           selectOnFocus:当获得焦点时立刻选择一个已存在的列表项。默认为false,此项只有在editable=true时才会生效 

           store:列表框绑定的数据源 

           transform:将页面中已存在的元素转换为组合框 

           lazyInit:延时初始化下拉列表,默认为true 

           lazyRender:延时渲染,默认为false 

           triggerAction:设置单击触发按钮时执行的默认操作,有效值包括all和query,默认为query,如果设置为all则会执行allQuery中设置的查询 

           typeAhead:设置在输入过程中是否自动选择匹配的剩余部分文本(选择第一个满足条件的),默认为false 

           value:初始化组合框中的值 

           valueField:组合框的值字段 

           valueNotFoundText:值不存在时的提示信息 

           tpl:Ext模板字符串或模板对象,可以通过该配置项自定义下拉列表的显示方式

     方法: 

           clearValue():清空字段当前值 

           doQuery( String query, Boolean forceAll ): 

           getValue(): 

           getStore(): 

           setValue( String value ):

15、Ext.form.DateField 

     配置项: 

           maxValue:允许选择的最大日期 

           maxText:当日期大于最大值时的错误提示信息 

           minValue:允许选择的最小时间 

           minText:当日期小于最小值时的错误提示信息 

           format:日期显示格式,默认为“m/d/y”,一般使用“Y-m-d” 

               Y:四位年份 

               m:带前缀0的月份 

               d:带前缀0的日期 

               y:两位年份 

               n:不带前缀0的月份 

               j:不带前缀0的日期 

               w:星期的数字,0表示星期日,1代表星期一 

           showToday:是否显示今天按钮,默认为true 

           altFormats:多个日期输入格式组成的字符串,不同的格式之间使用“|”进行分割,默认值为'm/d/Y|n/j/Y|n/j/y|m/j/y|n/d/y|m/j/Y|n/d/Y|m-d-y|m-d-Y|m/d|m-d|md|mdy|mdY|d|Y-m-d' 

           disabledDates:禁止选择的日期组成的数组 

           disabledDatesText:选择禁选日期时显示的提示信息 

           disabledDays:禁止选择的星期组成的数组,0代表星期日,1代表星期一 

           disabledDaysText:选择禁选星期时显示的提示信息 

           invalidText:当日期值非法时显示的提示信息 

     方法: 

           getValue():取得日期值

16、Ext.form.FieldSet 

      配置项: 

           animCollapse:动画折叠,默认为false 

           checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false 

           checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效 

           labelWidth:字段标签的宽度,可以级联到子容器 

           layout:布局,默认为form

17、Ext.form.TimeField 

      配置项: 

           maxValue:列表中允许的最大时间 

           maxText:当时间大于最大值时的错误提示信息 

           minValue:列表中允许的最小时间 

           minText:当时间小于最小值时的错误提示信息 

           increment:两个相邻选项间的时间间隔,默认为15分钟 

           format:显示格式,默认为“g:i A”。一般使用“H:i:s” 

                H:带前缀0的24小时 

                i:带前缀0的分钟 

                s:带前缀0的秒 

           invalidText:当时间值非法时显示的提示信息 

           altFormats:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割

分享到:
评论

相关推荐

    EXT.form组件

    例如,`Ext.form.NumberField`的配置项包括`allowDecimals`、`allowNegative`、`decimalPrecision`等,用于控制数字输入的规则。而`Ext.form.TextArea`支持`growMax`和`growMin`,可以自动调整高度以适应输入内容。`...

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    Ext.ux.form.ColorPickerFieldPlus 老外重写调色版

    `Ext.ux.form.ColorPickerFieldPlus` 是一个由老外开发者重写的色彩选择器组件,它扩展了原生的Ext JS库中的`ColorPickerField`控件,为用户提供更加丰富的色彩选取体验。这个组件的目的是为了实现更自由、更接近...

    ExtJs 带清空功能的日期组件

    DateField是Ext.form.field.Date的实例,它继承自Ext.form.field.Text。DateField提供了一个日期选择器,允许用户通过日历图标选择日期,或者直接在文本框中输入日期。默认情况下,它会按照指定的格式显示和验证日期...

    Ext扩展dateField时间控件,可以选择年月日、年月、年、月

    文件内容可能包括定义新的配置选项、重写方法以处理用户交互、定义新的模板以显示不同的日期格式,以及注册事件处理器等。 分析`ExDateField.js`可以帮助我们更好地理解如何实现这些功能。例如,我们可以查找设置...

    Ext Extjs 禁止文本和日期编辑

    var textField = Ext.create('Ext.form.field.Text', { fieldLabel: '文本字段', id: 'readOnlyTextField' }); // 动态设置 readOnly 为 true textField.setReadOnly(true); ``` 在上述代码中,我们首先创建了一...

    Ext.ux.form.TinyMCETextArea

    Ext.ux.form.TinyMCETextArea 是一个在Extjs4框架下实现的组件,它将TinyMCE编辑器集成到了ExtJS的表单控件中,提供了富文本编辑的功能。这个组件是基于HTML5构建的,因此在兼容性和功能上能够满足现代网页应用的...

    Ext DateField控件 - 只选择年月

    1. **类定义**:创建一个新的DateField子类,可能命名为`MonthPicker`,继承自Ext.form.field.DateField。 2. **配置项**:定义新的配置选项,如`allowOnlyMonthYear`,用于开启只选择年月模式。 3. **模板修改**:...

    ext控件form相关配置

    #### 二、Ext JS Form控件概述 Ext JS的`Form`控件提供了一套丰富的API用于创建、管理和验证Web表单。该控件的核心特性包括: 1. **表单布局**:允许开发者轻松定义表单的布局方式。 2. **字段管理**:支持添加...

    Ext.form.FieldSet的用法.docx

    它提供了一种方便的方式来呈现和管理一组相关的输入控件,并且可以通过配置项进行自定义以适应不同的设计需求。以下是对FieldSet的一些关键配置项的详细解释: 1. **checkboxToggle**: 如果设置为`true`,FieldSet...

    Ext.ux.form.field.DateTime:ExtJS DateTime字段

    Ext.ux.DateTimeField控件已在Sencha论坛上浮动。 有一些补丁程序使其可用于5.1。 参见此处: : 什么有效 我得到了最新版本,将类重命名为更类似于当前的Ext 5.1架构,并修复了尝试选择时间控件时的错误。 过时的...

    Ext组件描述,各个组件含义

    - **功能描述**:Component 是所有 Ext 组件的基础类,它定义了所有 Ext 组件都共有的基本属性和方法。 - **主要用途**:作为所有其他组件的基类。 **1.5 Container (Ext.Container)** - **xtype**: `container` -...

    Extjs5 日期时间公共组件

    日期用Extjs自带的Ext.form.field.Date,时间用Ext.form.field.Number和Ext.form.Label进行组装。 样式为横向的日期、时间,非日期弹出框下方选择时间。 注意事项:1、只有日期、年、月、日全部选择后,才能从name中...

    ext多选下拉列表的全选功能实现

    "ext多选下拉列表的全选功能实现"这个主题聚焦于一个特定的UI组件——ExtJS库中的MultiComboBox,这是一种允许用户多选的下拉列表控件。在实际应用中,全选功能常常被用来快速选择所有选项,极大地提高了用户的操作...

    Ext日期控件显示农历,及其周末高亮显示

    先有两种实现方式,一为重写Date.DatePicker和Ext.form.DateField控件的相应方法、另一种为单独做一个扩展扩建。 本JS文件在Ext3.1测试通过、若果要在高版本中使用,可参照例子重写相应源码的方法即可。

    EXT js 4带时间的日期控件

    EXT JS 4 的日期控件(`Ext.form.field.Date`)通常用于让用户选择一个日期。默认情况下,它只显示日期部分,但通过扩展或配置,我们可以让它包含时间选择。这个控件基于浏览器的原生日期选择器进行增强,提供了一种...

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    ExtJS 是一个强大的JavaScript前端框架,它提供了丰富的用户界面组件,包括树形控件(tree)、表格(grid)和表单(form)。本实例“ext实例 左边是 tree 右边是grid 双击grid弹出form修改”是针对初学者的一个宝贵...

    extjs 5 textfield 金额控件扩展

    1. **自定义类**:创建一个继承自EXTJS的`Ext.form.field.Text`的子类,比如`Ext.form.field.MoneyField`。这个类将包含处理金额格式化和验证的逻辑。 2. **模板**:定义一个模板来显示货币符号,如人民币的"¥"或...

    extjs4.2 日期控件扩展带时分秒

    - 这个类继承自`Ext.form.field.Date`,并通过添加新的配置选项和方法来实现时间和日期的综合选择。 - **依赖组件**:`Ext.zc.form.DateTimePicker` - 此组件负责展示日期时间选择器界面,提供用户交互操作。 ###...

Global site tag (gtag.js) - Google Analytics