ExtJs 4.x 学习小记：使用FieldSet进行查询面板的布局

效果

为了让界面显得清晰，将各种查询条件放到FieldSet中，并可以设置FieldSet的标题和是否可以折叠。

布局方式有很多，像这种需要将很多信息放在一排的情况，可以使用column方式的layout，但是如果信息多，那要写太多的列，而且控制起来很不方便。

页面中元素的定位有一种是absolute，就是固定位置，现在用到这里还是比较合适的。

为了实现多行的效果，我在FieldSet中放置了两个panle，分别充当两行元素的容器（当然可以直接在FieldSet中添加元素，不使用panle，为了布局时不考虑元素的top值，所以这里用panle，这样控制好panel的位置，里面的元素就只考虑left值就好了。

这里采用的是vbox布局方式

 var fs = new Ext.form.FieldSet({
 	title:'查询条件',
 	collapsible: true,//可折叠
 	layout:'vbox',//vbox布局
 	height:80,//设置FieldSet的高度
 	defaults:{
 		border:false 		//去掉panel的边框
 	},
 	items:[{
 		xtype:'panel',
 		width:'100%',	//宽度充满容器
 		flex:1,
 		defaults:{
 			labelWidth:60	//标签的默认宽度
 		},
	 	items:[{
	    	xtype:'combobox',
	    	style: 'position:absolute;left:15px;',	//定位
	 		name:'s_ownerunit',
	 		fieldLabel:'使用单位',
	 		width:200
	    },
	    {
	    	xtype:'combobox',
	    	style: 'position:absolute;left:225px;',
	 		name:'s_state',
	 		fieldLabel:'单据状态',
	 		width:150
	    },
	    {
	    	xtype:'checkboxfield',
	    	style: 'position:absolute;left:395px;',
	 		name:'s_czdrq',
	 		boxLabel:'制单日期',
	 		width:80
	    },
	    {
	    	labelSeparator:'',
	    	xtype:'datefield',
	    	style: 'position:absolute;left:465px;',
	 		name:'s_sdate',
	 		value:new Date(),
	 		format:'Y-m-d',
	 		width:150
	    },
	    {
	    	labelSeparator:'',
	    	xtype:'datefield',
	    	fieldLabel:'-',
	    	labelWidth:10,
	    	style: 'position:absolute;left:620px;',
	 		name:'s_edate',
	 		value:new Date(),
	 		format:'Y-m-d',
	 		width:160
	    }] 		
 	},{
 		xtype:'panel',
 		width:'100%',
 		flex:1,
 		defaults:{
 			labelWidth:60
 		}, 		
 		items:[{
		    	xtype:'textfield',
		    	style: 'position:absolute;left:15px;',
		 		name:'s_chcker',
		 		fieldLabel:'审核人',
		 		width:200 			
	 		},
		    {
		    	xtype:'combobox',
		    	style: 'position:absolute;left:225px;',
		 		name:'s_zgks',
		 		fieldLabel:'主管科室',
		 		width:150
		    },
		    {
		    	xtype:'checkboxfield',
		    	style: 'position:absolute;left:395px;',
		 		name:'s_ctjyf',
		 		boxLabel:'统计月份',
		 		width:80
		    },
		    {
		    	labelSeparator:'',
		    	xtype:'combobox',
		    	style: 'position:absolute;left:465px;',
		 		name:'s_year',
		 		value:'2014',
		 		width:100
		    },
		    {
		    	labelSeparator:'',
		    	xtype:'displayfield',
		    	fieldLabel:'年',
		    	style: 'position:absolute;left:570px;',
		 		width:10
		    },
		    {
		    	labelSeparator:'',
		    	xtype:'combobox',
		    	labelWidth:10,
		    	style: 'position:absolute;left:585px;',
		 		name:'s_month',
		 		value:'4',
		 		width:100
		    },
		    {
		    	labelSeparator:'',
		    	xtype:'displayfield',
		    	fieldLabel:'月',
		    	style: 'position:absolute;left:690px;',
		 		width:10
		    },{
		    	xtype:'button',
		    	style: 'position:absolute;left:720px;',
		    	width:50,
		    	text:'查询',
		    	handler:function(){
		    		
		    	}
		    }]
 	}]
 })