FieldSet的使用--在数据周围绘制一个带标题的框

今天有个任务,如图,了解到一个新的组件FieldSet

FieldSet的使用--在数据周围绘制一个带标题的框_第1张图片

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默认一般显示在左上角。

用法:点击打开链接


你可能感兴趣的:(FieldSet的使用--在数据周围绘制一个带标题的框)