ExtJS 中Label、Fieldset字段集、FieldContainer 容器字段
2013-06-30 21:23 阅读(182)

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