Extjs中grid的tbar多行显示问题

问题描述：在ExtJs中有个页面，需要在GridPanel的TopToolbar上面放好几个下拉框、输入框之类的控件，
发现放不下了，所以想找办法实现多行tbar显示。
然后上网找啊找，结果网上很一致的办法是再定义一个tbar，然后通过renderto：grid.tbar
但是，我使用这个方法后发现没有效果，还是一行啊。

部分代码如下：
var grid = new Ext.grid.GridPanel(
{
closable: true,
columns: [
{ width: 50, header: '营业部号' },
{ width: 140, header: '营业部名称' },
{ width: 70, header: '客户编号' },
{ width: 80, header: '用户姓名' },
{ width: 60, header: '等级编号' },
{ width: 130, header: '等级名称' },
{ width: 50, header: '付费方式' },
{ width: 60, header: '申请类型' },
{ width: 60, header: '服务期限' },
{ width: 70, header: '申请日期' },
{ width: 70, header: '操作员号' },
{ width: 100, header: '操作员名称' },
{ width: 80, header: '指标类型' },
{ width: 170, header: '指标值' },
{ width: 80, header: '备注' }
],
disableSelection: false,
ds: Ext.StoreMgr.add('store-applied', new Ext.data.JsonStore({
autoLoad: true,
url: '../ext/paging.action',
baseParams: { sizequery_function_id: '20072', detailquery_function_id: '20042', l_query_type: '1', c_query_type: '1' ,c_rank_type: '3', vc_rank_type: '3'},
fields: [ 'l_depart_no', 'vc_depart_name', 'vc_user_no', 'vc_user_names', 'l_rank_no', 'vc_rank_name', 'c_fee_type', 
'c_service_type', 'l_service_date', 'l_apply_date', 'vc_operator_no', 'vc_operator_name',
'c_index_type', 'en_indexs', 'vc_remark' ],
id: 'id',
storeId: 'store-applied',
totalProperty: 'total',
root: 'records'
})),
id: 'grid-applied',
bbar: new Ext.PagingToolbar({
store: Ext.StoreMgr.get('store-applied')
}),
title: '成功申请的客户',
tbar: new Ext.Toolbar(
{
items: [
{
text: '等级类型',
handler: function(){rankTypeCombo.setValue();}
}, rankTypeCombo, {
text: '等级',
handler: function(){rankCombo.setValue();}
},rankCombo, {
text: '营业部号',
handler: function(){branchCombo.setValue();}
}, branchCombo, {
text: '客户编号'
},userField, {
text: '申请类型',
handler: function(){serviceTypeCombo.setValue();}
},serviceTypeCombo  
]
})
});
//alert(grid.getId());
//alert(grid.getTopToolbar().xtype);
var tbar2 = new Ext.Toolbar(
{
renderTo: grid.getTopToolbar(),
items: [
{ text: '申请时间'},apply1DField, 
{ text: '至' },apply2DField,  
{ text: '到期时间' },service1DField, 
{ text: '至'},service2DField, 
{ text: '搜索',
iconCls: 'search',
handler: function(){
Ext.StoreMgr.get('store-applied').baseParams = { sizequery_function_id: '20072', detailquery_function_id: '20042', l_query_type: '1', c_query_type: '1', 
vc_rank_type: '3', c_rank_type: '3', l_rank_no: rankCombo.value, l_depart_no: branchCombo.value,
vc_user_no: userField.value, c_service_type: serviceTypeCombo.value, l_apply_date1: apply1DField.value, l_apply_date2: apply2DField.value,
l_service_date1: service1DField.value, l_service_date2: service2DField.value};
Ext.StoreMgr.get('store-applied').load();
}},
'->',
{ text: '导出',
handler: function(){excelOut();}}
]
});

实在没办法了，所以求助万能的csdn，希望各位大哥能够点拨我一下。

var store = new Ext.data.Store({
  // load using script tags for cross domain, if the data in on the same domain as
  // this page, an HttpProxy would be better
  proxy: new Ext.data.HttpProxy({
  url: this.url//任务列表中的各种任务统一由这个Servlet统一处理
  }),
  // create reader that reads the Topic records
  reader: new Ext.data.JsonReader({
  root: 'objectList',
  totalProperty: 'total',
  ////id: 'threadid',
  fields: [
  'assign_date', 'flow_desc', 'seq_desc', 'job_desc','title','color'
  ]
  })
  });
   
  var cm = new Ext.grid.ColumnModel([{
  ////id: 'assign_date', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
  header: "任务分配时间",
  dataIndex: 'assign_date',
  width: 100
  },{
  header: "流程",
  dataIndex: 'flow_desc',
  width: 100
  },{
  header: "环节",
  dataIndex: 'seq_desc',
  width: 70,
  renderer: function(value,a,record,rowIndex){
  //alert(Ext.util.JSON.encode(record.data));
  var title = record.get("title");
  return '<span title="'+title+'">'+value+'</span>';
  }
  ///align: 'right'
  },{
  header: "任务详述",
  dataIndex: 'job_desc',
  width: 260
   
  }]); 
  var grid = new Ext.grid.GridPanel({
  el:this.contentEl,
  width:780,
  height:400,
  stripeRows : true,//stripe条纹
  //tbar:["流程", "-", {xtype : "textfield",id : "qp1_prtmng"}, "-", {pressed : true,enableToggle : false,text : "查 询"}, "-", {pressed : true,enableToggle : false,text : "全 部"}],//
  tbar: new Ext.Toolbar({  
  autoWidth:true,  
  autoShow:true,  
  items:[  
  {text: 'there is a add button for test'},  
  '-',  
  '->',  
  {text: 'there is a update button for test'},  
   
  {text: 'there is a delete button for test'}  
  ]  
  }),
  store: store,
  cm: cm,
  ////trackMouseOver:false,是否跟踪鼠标移动
  sm: new Ext.grid.RowSelectionModel({selectRow:Ext.emptyFn}),
  loadMask : new Ext.LoadMask(this.maskEl,{msg:"正在加载数据..."}),
  view:new SparknetExt.JobListGridView({
  forceFit:true,
  enableRowBody:true,
  showPreview:true 
  }),
  bbar: new SparknetExt.JobListPagingToolbar({
  pageSize: 10,
  store: store,
  jobTabId:this.tabEl,
  jobTabTitle:this.tabTitle,
  displayInfo: true,
  displayMsg: '显示第 {0} 条 - {1} 条 共 {2} 条',
  emptyMsg: "No topics to display"
  })
  });
   
 
grid.render();//grid渲染完后再添加新的Toolbar
this.bbar2 = new Ext.Toolbar({
renderTo:grid.tbar,
items:['Example of second toolbar', '-', {
text:'Button'
,iconCls:'icon-key'
}, '-'
]
});
this.bbar3 = new Ext.Toolbar({
renderTo:grid.tbar,
items:['Example of second toolbar', '-', {
text:'Button'
,iconCls:'icon-key'
}, '-'
]
});

store.load({params:{start:0, limit:10,flag:this.flag}});

用自定义流式布局,可完美解决,请参考
http://www.extjs.com/forum/showthread.php?t=82592
Animal的回复.

在tbar中加入多个toolbar

  var oneTbar = new Ext.Toolbar({  
  items: [{  
xtype:'textfield',
name:'filterText'
},
{
text: '查询',
scope:this
}]
  });  
  var twoTbar = new Ext.Toolbar({  
  items: [{  
  text: '复制'  
  },  
  {  
  text: '粘贴'  
  }]  
  });  

var p = new Ext.Window({
  title: 'multi line toolbar',
  width: 300,
  height:200,
  tbar: {
  xtype: 'container',
  items: [oneTbar,twoTbar]
  }
});
p.show();