今天有个任务,如图,了解到一个新的组件FieldSet
API给出的解释是--针对某一组字段的标准容器。
简单代码:
new Ext.form.FieldSet({
title:'条件细别',
border:true,
anchor :'99%',
autoHeight:true,
items:[{
xtype:'checkbox',
boxLabel: '全部',
},{
columns:6,
xtype:'checkboxgroup',
items:[{ boxLabel: '姓名'},{boxLabel: '性别'},{boxLabel: '民族'},{boxLabel: '出生日期'},{boxLabel: '户籍地'},{boxLabel: '是否登记户口'}]
},{
xtype:'checkboxgroup',
columns:6,
items:[{ boxLabel: '就学情况'},{boxLabel: '寄宿情况'},{boxLabel: '健康状况'},{boxLabel: '实际监护情况'},{hidden:true,labelSeparator:''},{boxLabel: '备注'}]
},{
columns:3,
xtype:'checkboxgroup',
items:[{ boxLabel: '村(居)委会联系人'},{boxLabel: '父亲务工地点'},{boxLabel: '母亲务工地点'}]
}]
}) ,
Ext原始的样式是:.x-fieldset{border:1px solid #B5B8C8;padding:10px;margin-bottom:10px;display:block;}
fieldset:对表单进行分组,一个表单可以有多个fieldset
legend:说明每组的内容描述
fieldset默认是带边框的,而legend默认一般显示在左上角。
用法:点击打开链接