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:'产地来源'
   }