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

来源：互联网发布：暗黑3挂机软件编辑：程序博客网时间：2024/05/02 00:00

效果

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

0 0