效果
为了让界面显得清晰,将各种查询条件放到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(){
}
}]
}]
})