extjs 里在tbar 里实现多行显示

由于在tbar里加的控件太多,一行不能显示下.
如何能实现多行放置控件.
var rp_work_incident_class = function() {
rp_work_incident_class.superclass.constructor.call(this, {
layout : 'fit',
height : 1000,
width : 550,
autoScroll : false,
tbar : [ '上报时间起:',{
id : 'start',
xtype : 'datefield',
format: 'Y-m-d',
readOnly:'true',
// hidden :'true',
//value: new Date
value:NowfirstDate()
},'-','-',
'上报时间止:', 
{
id : 'end',
xtype : 'datefield',
format: 'Y-m-d',
readOnly:'true',
// hidden :'false',
value: new Date()
},'-','-',
'操作时间起:',{
id : 'fromStop',
xtype : 'datefield',
format: 'Y-m-d',
readOnly:'true',
// hidden :'true',
//value: new Date
value:NowfirstDate()
},'-','-',
'操作时间止:', 
{
id : 'toStop',
xtype : 'datefield',
format: 'Y-m-d',
readOnly:'true',
// hidden :'false',
value: new Date()
},
 
{
text : '确定',
iconCls:'verify-icon',
handler : this.viewRpt,
scope : this
],
// html : '<iframe id="report" height="100%" width="100%" marginwidth="10" marginheight="20" scrolling="yes" frameborder="no" src ="CommonReport?ReportName=rp_work_incident_class.rptdesign&format=html&reportClass=DAY&title=故障/服务请求工作量 故障分类 查询统计表-" frameBorder=false />'
html : '<iframe id="report" height="100%" width="100%" marginwidth="10" marginheight="20" scrolling="yes" frameborder="no" src ="#" frameBorder=false />'
});

}

CSS code

使用这个ButtonGroup
对button进行分组