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:'产地来源'
}
分享到:
相关推荐
- fieldset:字段集,用于组织表单中的多个字段 - hidden:隐藏字段 - htmleditor:HTML编辑器 - label:标签 - numberfield:数字输入框 - radio:单选按钮 - textarea:文本区域 - textfield:文本输入框 - ...
ExtJS 中的 xtype.typename 介绍 ExtJS 中的 xtype 是一个非常重要的概念,它用于定义组件的类型,从而确定组件的行为和样式。xtype 是 ExtJS 的核心组件之一,它提供了大量的组件类型,满足不同场景下的需求。 ...
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验证 ...
- `Ext.form.FieldSet`:字段集,用于组织和分组表单元素。 5. **面板及布局** - **面板(Panel)**:作为内容容器,可以包含其他组件。面板支持多种布局方式。 - **布局类**: - `Auto`:自动布局,根据内容...
7. **`fieldset`** - `Ext.form.FieldSet`,表单字段组,用于将一组相关的表单字段组合在一起。 8. **`hidden`** - `Ext.form.Hidden`,表单隐藏域,用于存储需要但不需要显示的信息。 9. **`htmleditor`** - `...
在Extjs开发过程中,`xtype`(扩展类型)是极为重要的一个概念。它实际上是一种类型标识符,用于快速创建特定类型的组件实例。通过使用预定义的`xtype`值,开发者可以方便地构建出各种复杂的用户界面而无需编写大量...
6. **`panel`:** 面板组件,是ExtJS中最常用的容器之一,可以包含多个子组件,通过`Ext.Panel`类实现。 7. **`tabpanel`:** 选项卡面板组件,用于实现选项卡界面,通过`Ext.TabPanel`类实现。 8. **`treepanel`:**...
- **`fieldset` (Ext.form.FieldSet)**: 表单字段组组件,用于将相关的表单字段组织在一起。 - **`hidden` (Ext.form.Hidden)**: 表单隐藏域组件,用于在表单中包含隐藏的信息。 - **`htmleditor` (Ext.form....
- `formcomponents`: `form`, `checkbox`, `checkboxgroup`, `combo`, `datefield`, `displayfield`, `field`, `fieldset`, `hidden`, `htmleditor`, `label`, `numberfield`, `radio`, `radiogroup`, `textarea`, `...
### ExtJS控件详解 #### 基本组件 **Ext.Button** - **描述**: 提供了一种标准的用户交互方式,...以上是ExtJS框架中常用的控件及其用途,通过合理运用这些控件,开发者可以构建功能丰富、交互流畅的Web应用界面。
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...
- 结果集:介绍了如何使用PORTAL组件展示结果集; - 工作消息:展示了如何通过PORTAL组件发送和接收消息。 2.7 附件管理组件 - 配置说明:介绍了如何配置附件管理组件; - 使用方法:提供了附件管理的使用指导。 ...