`

Extjs表单组件及属性 .

 
阅读更多

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属性

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 ):持久化表单数据到记录集中

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()

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()

Ext.form.Label

     配置项:

          html:

          text:

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

Ext.form.TextArea
      配置项:
           preventScrollbars:是否禁止出现滚动条,默认为false

Ext.form.NumberField
      配置项:
           allowDecimals:是否允许输入小数,默认为true
           allowNegative:是否允许输入负数,默认为true
           baseChars:输入的有效数字集合,默认为'0123456789'
           decimalPrecision:数字的精度,默认保留小数点后2位
           decimalSeparator:十进制分隔符,默认为'.'
           maxValue:允许输入的最大数值
           maxText:超过最大值之后的提示信息
           minValue:允许输入的最小数值
           minText:超过最小值之后的提示信息
           nanText:输入非有效数值之后的提示信息

Ext.form.Checkbox
      配置项:
           boxLabel:复选框的文字描述
           checked:复选框是否被选择,默认为false
           handler:当checked值改变时触发的函数,函数包含两个参数:checkbox、checked
           inputValue:
     方法:
           getValue():返回复选框的checked状态
           setValue( Boolean/String checked ):

Ext.form.CheckboxGroup
     配置项:
           allowBlank:是否允许不选择,默认为true
           blankText:
           columns:显示的列数,可选值包括:固定值auto、数值、数组(整数、小数)
           items:对象数组
           vertical:是否垂直方向显示对象,默认为false

Ext.form.Radio
     方法:
           getGroupValue():
           setValue( value {String/Boolean} ): 

Ext.form.RadioGroup
     配置项:
           allowBlank:
           blankText:

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 ):

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():取得日期值

Ext.form.FieldSet
      配置项:
           animCollapse:动画折叠,默认为false
           checkboxToggle:设置是否显示字段集的checkbox选择框,默认为false
           checkboxName:指定字段集中用于展开或隐藏字段集面板的checkbox的名字,该属性只有在checkboxToggle为true时生效
           labelWidth:字段标签的宽度,可以级联到子容器
           layout:布局,默认为form

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:多个时间输入格式组成的字符串,不同的格式之间使用“|”进行分割


分享到:
评论

相关推荐

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

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

    精通JS脚本之ExtJS框架.part2.rar

    7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    6. **表单处理**:强大的表单组件和表单处理能力,支持各种输入类型,以及验证和提交功能。 7. **拖放功能**:内置的拖放API允许用户轻松创建可拖放的元素,增强了用户体验。 8. **国际化**:支持多语言,包括中文...

    extJs+2.1学习笔记.pdf

    ExtJS的表单组件强大而灵活,支持多种输入类型、验证、布局和提交机制。学习如何创建和操作表单是ExtJS开发的重要部分。 4. **Ext.TabPanel篇** TabPanel是用于展示多个视图的组件,每个Tab代表一个面板。学习...

    精通JS脚本之ExtJS框架.part1.rar

    7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能详解 8.2.1 主要属性功能 8.2.2 自定义列宽度 8.2.3 执行按列排序 8.2.4 ...

    EXTJS 3[1].0 API中文文档

    1. **组件系统**:EXTJS 提供了大量的预定义组件,如表格、面板、窗口、表单、菜单、工具栏等,这些组件可以自由组合,构建复杂的用户界面。开发者可以通过配置选项自定义组件的行为和外观。 2. **布局管理**:...

    ExtJs教程_完整版.pdf

    - **初始化**: 使用ExtJS API创建组件并定义其属性。 - **事件绑定**: 绑定事件处理函数以响应用户的操作。 - **数据交互**: 通过AJAX技术实现数据的异步传输。 #### 四、与其他JavaScript库的集成 **4.1 适配器的...

    ExtJs组件类的对应表

    #### 表单及表单域组件 1. **`form`** - `Ext.FormPanel`或`Ext.form.FormPanel`,表单面板组件,用于创建表单并管理其字段。 2. **`checkbox`** - `Ext.form.Checkbox`,多选框组件,用于创建多选输入。 3. **...

    ExtJs4.0 表单提交Demo

    - **创建表单组件**:首先,定义一个FormPanel,并在其内部添加所需的表单字段,例如`Ext.form.field.Text`、`Ext.form.field.Date`等。 - **配置表单行为**:为FormPanel设置action属性,指定提交的URL,或者在...

    extjs中文文档大全

    开发者可以通过阅读手册了解每个组件的属性、方法和事件,便于在实际项目中灵活运用。同时,手册还会讲解EXT的布局系统,如Fit布局、Form布局和Table布局,以及如何使用Store和Model进行数据管理。 3. **Ext Core...

    Angular Vue Easy UI ExtJS前端框架视频教程.zip

    Angular的核心组件包括服务、指令、管道和模块,同时还支持路由、表单处理以及与后端API的交互。学习Angular将使开发者能够创建复杂、高性能的应用程序。 **Vue** 是一个轻量级但功能齐全的前端框架,由尤雨溪开发...

    ExtJs各组件简单应用例子导入到eclipse即可

    它提供了一系列丰富的用户界面组件,如表格、面板、按钮、菜单、表单等,使得开发者能够创建出具有桌面级用户体验的网页应用。本示例主要关注如何将ExtJS的组件应用实例导入到Eclipse开发环境中,以便进行学习和开发...

    extjs+commons-fileupload.jar 实现文件上传

    1. **前端准备**:使用ExtJS创建一个包含`filefield`组件的表单,允许用户选择要上传的文件。设置`multiple`属性为`true`以支持多文件上传。 2. **提交表单**:当用户点击提交按钮时,ExtJS会通过Ajax方式发送文件...

    ExtDesigner for extjs3.0使用帮助文档.pdf

    ExtJs3.0是一款卓越的JavaScript框架,它以其强大的功能、丰富的组件库以及对JSON数据格式的支持而著称。尽管如此,对于开发者来说,掌握所有组件的功能并非易事。为了解决这一问题,ExtJs开发团队推出了Ext-...

    extjs动态表单

    ExtJS 动态表单是基于Sencha ExtJS框架实现的一种灵活、可扩展的表单设计方式,它允许开发者在运行时动态地创建、修改或加载表单组件,以适应不同场景下的数据输入需求。在Web应用开发中,动态表单通常用于处理不...

    ExtJS快速入门指南.pdf

    组件属性和组件方法分别介绍了在ExtJS中组件的公共属性和可用方法,这有助于开发者了解和使用ExtJS组件的API。 事件及事件响应部分讲解了ExtJS中的事件处理机制,说明了如何捕获和处理事件,从而实现用户交互。 ...

    Extjs3.4+Ext-core.pdf+轻松搞定Extjs.pdf

    它提供了丰富的用户界面组件,如表格、面板、表单、菜单等,使得开发者能够创建功能强大的、具有桌面应用风格的网页应用。本资源包包含了与ExtJS 3.4相关的学习资料,包括`Ext-core.pdf`、`轻松搞定Extjs.pdf`以及`...

    Extjs表单中的通用组件

    在深入探讨Extjs表单中的通用组件之前,我们先简要了解一下Extjs。Extjs是一个用JavaScript编写的开源前端框架,用于构建复杂的企业级Web应用程序。它提供了丰富的UI组件库,使得开发者能够快速构建功能全面、外观...

    extjs3.3 中文文档

    6. **表单组件**:表单是Web应用中的重要部分,ExtJS提供了丰富的表单组件,如文本框、下拉框、复选框、单选按钮等,还支持自定义验证和远程提交。 7. **拖放功能**:ExtJS支持拖放操作,可以轻松实现元素之间的...

    extjs表单验证特殊字符

    EXTJS表单验证主要依赖于`Ext.form.field.Base`组件,它是所有表单字段的基础类。每个表单字段都可以配置验证规则,通过`vtype`属性定义基本的验证类型,或者使用`validators`属性自定义验证函数。对于特殊字符的...

Global site tag (gtag.js) - Google Analytics