欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

ExtJS 中Label、Fieldset字段集、FieldContainer 容器字段

程序员文章站 2022-07-07 17:40:21
...
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:'产地来源'
   }