`

ExtJS 中Label、Fieldset字段集、FieldContainer 容器字段

阅读更多
Ext.form.Label:可以与表单中的一个字段进行关联,通常情况下可以使用表单字段的fieldLabel配置项,只有当布局不能满足要求时,才使用Ext.form.Label 标签字段。
{//Ext.form.Label 标签字段
   xtype:'label',
   forId:'userName',//关联inputId为userName的表单字段
   text:'用户名'   
   },
   {
    name:'userName',
    xtype:'textfield',
    inputId:'userName',
    hideLabel:true //隐藏字段标签
   }
注:使用标签字段需要通过它的forId配置项与目标字段的inputId配置项进行匹配,如果在label元素内点击文本,就会触发目标字段控件,焦点将会自动转移到目标控件上。

Ext.form.FieldSet字段集
:标准的字段容器,默认布局为“anchor”,也可以指定为其他布局。常用来将含义相近的字段组织在一起,是表单结构清晰明了。
   //Ext.form.fieldSet
   {
   title:'产品信息(fieldset)',
   xtype:'fieldset',
   collapsible:true,//显示展开收缩状态的切换按钮
   bodyPadding:5,
   defaults:{//统一设置表单字段默认属性
    labelSeparator:":",//分隔符
    labelWidth:50,
    width:160   
   },
   defaultType:'textfield',//设置表单字段的默认类型
   items:[{
    fieldLabel:'产地'
   },{
    fieldLabel:'售价'
   }]
   },
   {
    title:'产品描述',
    xtype:'fieldset',
    bodyPadding:5,
    checkboxToggle:true,
    checkboxName:'description',//提交数据时,复选框对应的name
    labelSeparator:':',
    items:[{
     fieldLabel:'简介',
     labelSeparator:':',
     labelWidth:50,
     width:160,
     xtype:'textarea'
    }]
   }

Ext.form.FieldContainer容器字段:当需要把多个字段或组件作为一个表单项展示的时候用到该组件。把资源很好的排列起来,并且在表单中提供唯一的标签。
//Ex.form.FieldContainer容器字段
   {
      fieldLabel:'商品名称'
   },{
    xtype:'fieldcontainer',
    fieldLabel:'生产日期',
    layout:{//设置容器字段布局
    type:'hbox',
    align:'middle'//垂直居中
    },
    combineErrors:true,//合并展示错误信息
    fieldDefaults:{
     hideLabel:true,//隐藏字段标签
     allowBlank:false
    },
    defaultType:'textfield',
    items:[{
     fieldLabel:'年',
     flex:1,
     inputId:'yearId'
    },{
     xtype:'label',
     forId:'yearId',
     text:'年'
    },{
     fieldLabel:'月',
     flex:1,
     inputId:'monthId'
    },{
     xtype:'label',
     forId:'monthId',
     text:'月'
    },{
     fieldLabel:'日',
     flex:1,
     inputId:'dayId'
    },{
     xtype:'label',
     forId:'dayId',
     text:'日'
    }]
   },{
    fieldLabel:'产地来源'
   }



分享到:
评论

相关推荐

    Extjs中常用表单介绍与应用

    - fieldset:字段集,用于组织表单中的多个字段 - hidden:隐藏字段 - htmleditor:HTML编辑器 - label:标签 - numberfield:数字输入框 - radio:单选按钮 - textarea:文本区域 - textfield:文本输入框 - ...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.19 Ext.form.FieldSet字段集 4.1.20 Ext.form.FieldContainer容器字段 4.1.21 Ext.form.field.File文件上传字段 4.2 实现表单验证 4.2.1 常见的验证类型 4.2.2 表单验证(VType) 4.2.3 自定义VType验证 ...

    extjs中的xtype的所有类型介绍

    ExtJS 中的 xtype.typename 介绍 ExtJS 中的 xtype 是一个非常重要的概念,它用于定义组件的类型,从而确定组件的行为和样式。xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 ...

    ExtJS-3.4.0系列目录

    - `Ext.form.FieldSet`:字段集,用于组织和分组表单元素。 5. **面板及布局** - **面板(Panel)**:作为内容容器,可以包含其他组件。面板支持多种布局方式。 - **布局类**: - `Auto`:自动布局,根据内容...

    ExtJs组件类的对应表

    7. **`fieldset`** - `Ext.form.FieldSet`,表单字段组,用于将一组相关的表单字段组合在一起。 8. **`hidden`** - `Ext.form.Hidden`,表单隐藏域,用于存储需要但不需要显示的信息。 9. **`htmleditor`** - `...

    Extjs xtype集合

    在Extjs开发过程中,`xtype`(扩展类型)是极为重要的一个概念。它实际上是一种类型标识符,用于快速创建特定类型的组件实例。通过使用预定义的`xtype`值,开发者可以方便地构建出各种复杂的用户界面而无需编写大量...

    extJs xtype 类型

    6. **`panel`:** 面板组件,是ExtJS中最常用的容器之一,可以包含多个子组件,通过`Ext.Panel`类实现。 7. **`tabpanel`:** 选项卡面板组件,用于实现选项卡界面,通过`Ext.TabPanel`类实现。 8. **`treepanel`:**...

    ExtJs xtype一览

    - **`fieldset` (Ext.form.FieldSet)**: 表单字段组组件,用于将相关的表单字段组织在一起。 - **`hidden` (Ext.form.Hidden)**: 表单隐藏域组件,用于在表单中包含隐藏的信息。 - **`htmleditor` (Ext.form....

    ExtJS3总结内容

    - `formcomponents`: `form`, `checkbox`, `checkboxgroup`, `combo`, `datefield`, `displayfield`, `field`, `fieldset`, `hidden`, `htmleditor`, `label`, `numberfield`, `radio`, `radiogroup`, `textarea`, `...

    extjs控件列表

    ### ExtJS控件详解 #### 基本组件 **Ext.Button** - **描述**: 提供了一种标准的用户交互方式,...以上是ExtJS框架中常用的控件及其用途,通过合理运用这些控件,开发者可以构建功能丰富、交互流畅的Web应用界面。

    Ext Js权威指南(.zip.001

    7.4.4 数据集:ext.util.abstractmixedcollection与ext.util.mixedcollection / 330 7.4.5 数据验证及错误处理:ext.data.validations与ext.data.errors / 332 7.4.6 模型的关系:ext.data.association、ext.data...

    Jxstar系统管理手册V2.0.pdf

    - 结果集:介绍了如何使用PORTAL组件展示结果集; - 工作消息:展示了如何通过PORTAL组件发送和接收消息。 2.7 附件管理组件 - 配置说明:介绍了如何配置附件管理组件; - 使用方法:提供了附件管理的使用指导。 ...

Global site tag (gtag.js) - Google Analytics