`

Ext控件属性函数介绍|Ext.form各类控件的配置及方法

阅读更多

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

作者: 王德田 发表于 2011-03-31 18:22 原文链接

评论: 0 查看评论 发表评论


最新新闻:
· Spring.NET Visual Studio 2010 Extension 1.0.0(2011-04-08 08:50)
· 微软前工程师用谷歌地图建旅游搜索引擎(2011-04-08 08:49)
· 熊晓鸽:投资奇虎360回报率约50倍(2011-04-08 08:47)
· 永中科技创始人:永中office败于盗版 没输微软(2011-04-08 08:46)
· 惠普诉前高管非法窃取机密情报并提供给对手(2011-04-08 08:45)

编辑推荐:C#开发Android应用的必备——Mono for Android V1.0 发布

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

分享到:
评论

相关推荐

    ext控件form相关配置

    ### ext控件Form相关配置详解 #### 一、引言 在现代Web开发中,Ext JS作为一款功能强大且灵活的前端框架,被广泛应用于构建复杂的企业级应用程序。其中,`Form`控件是Ext JS中一个非常重要的组成部分,它为开发者...

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

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

    EXT 控件拖动例子

    在这个"EXT 控件拖动例子"中,我们将深入探讨EXTJS如何实现控件的拖放功能,以及如何在动态布局中运用这一特性。 EXTJS 提供了一个名为`Ext.dd.DragDrop`的接口,它使得在界面上的元素可以被拖动和放置。这个接口...

    Ext的FormPanel组件

    ### Ext的FormPanel组件 #### 综述 `FormPanel`是Ext JS框架...以上内容覆盖了Ext JS中的FormPanel组件的基本使用方法及一些高级特性。通过对这些特性的掌握,可以更高效地开发出功能完备且用户体验良好的表单界面。

    Ext上传文件控件

    这个控件通常与`Ext.form.Basic`和`Ext.form.Panel`一起使用,以实现完整的表单提交机制。 **文件上传组件的主要特点:** 1. **UI元素**:`Ext.form.FileField`创建一个输入字段,通常显示为"浏览..."按钮,用户...

    Ext日期时间控件 Spinner控件 Ext代码 Extjs Grid

    在本文中,我们将深入探讨`ExtJS`框架中的两个关键组件——`Ext日期时间控件`和`Spinner控件`,以及它们在`Grid`中的应用。`ExtJS`是一款强大的JavaScript库,专用于构建富客户端应用程序,尤其适用于创建复杂的、...

    ext6中年份选择控件亲测好用

    1. **创建YearField**: 通过EXT的构造函数,我们可以创建一个新的YearField实例,设置其属性如初始值、最小年份、最大年份等。例如: ```javascript Ext.create('Ext.form.field.Year', { fieldLabel: '出生年份'...

    ext2.0 DateTimeField控件

    在EXT JS 2.0框架中,DateTimeField控件是一个非常实用的组件,它扩展了基本的DateField控件,提供了更丰富的日期时间选择功能,包括小时、分钟和秒的显示与选择。这个控件是为了解决用户需要输入精确到秒的日期时间...

    Ext 实现自定义控件

    以下将详细讲解两种常见的自定义EXT控件的方法: 1. **重载 `initComponent` 函数** `initComponent` 是EXT JS组件生命周期中的一个重要函数,它在组件实例化时被调用,用于完成组件的基本配置和初始化。当需要...

    EXT 表单验证EXT 表单验证

    这通常通过扩展`Ext.form.field.VTypes`类来完成,然后在vtype属性中使用新创建的函数名。例如,如果你需要验证一个密码强度,可以创建一个新的vtype并设置`vtype: 'strongPassword'`。 4. **错误提示**:EXT表单...

    基于Ext2的日历控件和IP地址输入控件.zip

    因此,一个专门的IP地址输入控件(可能是自定义的Ext.form.field.IPAddress)会很有用。这种控件通常会包含四个文本框,分别对应IP地址的四部分,同时添加了输入验证,确保用户输入的每个部分都在0到255之间,或者...

    extjs 5 textfield 金额控件扩展

    这篇博文(链接已给出)可能详细介绍了如何创建并使用EXTJS 5 Textfield的金额控件扩展。通常,这样的扩展会包含以下几个关键部分: 1. **自定义类**:创建一个继承自EXTJS的`Ext.form.field.Text`的子类,比如`Ext...

    ext 4.0 日期选择控件 时分秒 中文版

    在实际项目中,开发者需要将这些文件正确引用到项目中,并根据需要配置日期选择控件的属性。例如,可以通过以下方式创建一个带有时分秒的日期选择器: ```javascript Ext.create('Ext.form.field.Date', { ...

    extjs日期+时间控件

    解决此类问题通常需要检查控件的配置项,如`format`属性(用于指定日期和时间的显示格式)、`value`属性(当前选定的日期时间值)以及任何可能影响显示的CSS样式。 4. **日期时间格式化**:在ExtJS中,日期和时间的...

    Ext日期时间(时分秒)控件

    标题中的“Ext日期时间(时分秒)控件”指的是在Web开发中...通过理解和掌握其配置选项、事件处理以及自定义方法,开发者可以创建出符合业务需求的日期时间选择控件。在实际开发中,不断实践和学习,是提高技能的关键。

    extjs属性方法大全

    ### Extjs 属性方法详解 #### 一、`Ext.form.Action` 类 `Ext.form.Action` 是用于处理表单操作的类,主要包括提交和加载数据的功能。 - **属性:** - `success`: 表示操作成功时的回调函数。 - `failure`: ...

    ext 的ppt ext 的ppt ext 的pptext 的pptext 的ppt

    Ext Form支持多种控件,包括: - `Ext.form.TextArea`:用于多行文本输入。 - `Ext.form.DateField`:用于选择日期。 - `Ext.form.Hidden`:用于隐藏字段,不显示在用户界面上。 - `Ext.form.HtmlEditor`:提供一个...

    EXT表单验证之TextField

    在EXT表单中,TextField是最常见的输入控件,用于接收用户的文本输入。`vtype`是EXT TextField的一个关键属性,用于定义输入字段的验证规则,确保用户输入的数据符合特定格式或条件。 EXT中的TextField支持多种...

    ext.net 1.x DEMO

    **EXT.NET 1.x 框架介绍** EXT.NET 是一个基于 .NET 平台的 Web 开发框架,它提供了一套丰富的用户界面组件,使得开发者可以构建出交互性强、性能优秀的网页应用。EXT.NET 1.x 版本是早期的一个稳定版本,包含了...

    Extjs4下拉树菜单ComboBoxTree支持单选和多选并且支持展开选中指定节点的通用控件

    要实现单选功能,ComboBoxTree可能使用了Ext.selection.Model类,通过配置singleSelect选项来限制用户只能选择一个节点。单击一个节点时,其他已选中的节点将被自动取消选中。这在需要用户做出唯一选择的场景中非常...

Global site tag (gtag.js) - Google Analytics