Extjs中grid的tbar多行显示问题

[zhengxiong1985]

问题描述：在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，希望各位大哥能够点拨我一下。

[gongmingwind]

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}});

[L272893453]

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

[cowboyhn]

在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();