`

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两行两列布局

    Extjs fieldset两行两列布局

    Extjs中文文档

    Extjs中文文档,包含Extjs的基本语法和各个类的详细说明以及用法。

    EXTJS4.0视频教程 30集 下载地址

    EXTJS4.0视频教程 30集 下载地址 另有EXTJS4.0视频教程配套代码 http://download.csdn.net/detail/sammy85/4421061

    ExtJS的FieldSet的column列布局

    ExtJS的FieldSet的column列布局,需要的朋友可以参考下。

    Extjs 中文API文档

    Extjs 中文API文档,有对Extjs相关API的中文说明

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

    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....

    extjs中验证实例

    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中文api,提供实例

    extjs中设置grid默认行高及换行

    Extjs 中想改变grid 行高,如果只是简单的设置了height的值是可以实现grid 的行高,但是如果使用了插件:rowexpander ,最出现新的问题。 感兴趣的朋友可以试试的。 此文档可以解决你的烦恼,为了找到资源下载,...

    Extjs 中文文档 很详细

    ExtJS中文文档,很好,很强大!绝对值得一看哦!

    ExtJs中文API

    ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!! ExtJs中文API,比较全面!并且提供了很多的例子!!

    ExtJs 实例+ExtJs中文教程(学习extjs必备)

    ExtJs 实例+ExtJs中文教程 大量ExtJs的实例和目前最好的ExtJs中文教程,学习ExtJs的朋友可以参考一下

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

    extjs3.3的中文文档

    ExtJS3.0中文API

    绝对的ExtJS3.0中文API,本人在网上找了好久才找到的,在此奉献给大家!!解压后有30多兆!!

    Extjs3 自定义类似于Fieldset的组件

    用Ext自定义一个类似于Fieldset的组件,还有数据绑定昂,跟json数据的交互,和后台交互使用了URLLoader,很强大,之前在网上找了很多,没有找到,后来我师傅给我源码,这里跟大家分享一下,有用到的童鞋们可以参考...

    extjs4 中文API

    extjs4.1 中文API

    EXTJS4自学手册

    EXTJS4自学手册——EXT容器布局(Auto,Anchor,Absolute,Hbox) EXTJS4自学手册——EXT容器布局(Vbox,Accordion,Table,Column) EXTJS4自学手册——EXT容器布局(Fit,Card,Border) EXTJS4自学手册——EXT组件布局 ...

    Ext grid 动态添加字段、列扩展

    Ext grid 动态添加字段、列扩展, 如何动态添加或者删除一个grid的列

    ExtJS中文资料、参考文档

    收集了ExtJS中文站上的资料,共52篇文章,保留了文章的原始风貌,支持关键字查询,里面的内容可以选择后ctrl-C拷出来。赚个辛苦分。

    extjs 中文 api chm格式的

    extjs 中文 api chm格式的!可以跟好的帮助你学习富客户端技术!!!!!!

Global site tag (gtag.js) - Google Analytics