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两行两列布局
Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。
EXTJS4.0视频教程 30集 下载地址 另有EXTJS4.0视频教程配套代码 http://download.csdn.net/detail/sammy85/4421061
ExtJS的FieldSet的column列布局,需要的朋友可以参考下。
Extjs 中文API文档,有对Extjs相关API的中文说明
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验证 4.3 表单的提交和加载 4.3.1 Ext....
title:"学习表单字段元素的字段集", width:600, height:400, frame:true, renderTo:"myForm", items:[ {xtype:"fieldset", width:500, labelAlign:"right", labelWidth:70, title:"个人信息" , ...
extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例extjs中文api,提供实例
Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...
ExtJS中文文档,很好,很强大!绝对值得一看哦!
ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!!
ExtJs 实例+ExtJs中文教程 大量ExtJs的实例和目前最好的ExtJs中文教程,学习ExtJs的朋友可以参考一下
extjs3.3的中文文档
绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!
用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...
extjs4.1 中文API
EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox) EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column) EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 ...
Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列
收集了ExtJS中文站上的资料,共52篇文章,保留了文章的原始风貌,支持关键字查询,里面的内容可以选择后ctrl-C拷出来。赚个辛苦分。
extjs 中文 api chm格式的!可以跟好的帮助你学习富客户端技术!!!!!!