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，希望各位大哥能够点拨我一下。

[liuhc10]

renderto：grid.tbar
的代码块必须放在grid的渲染代码之后才会有效果。
换句话说就是如果你要将第二个toolbar渲染到第一个grid.tbar上，必须在grid.tbar已经渲染好的前提下进行的

[zhengxiong1985]

我刚开始写Ext，新手，所以你的意思我了解，
但是我不清楚具体实现的代码是怎么样的。
能不能请你稍微写一下。
还有我看api上面有个render（）的方法，这个方法是怎么用的？
也能实现我要的效果么？

[liuhc10]

var bean = "com.hdkj.webpmis.domain.budget.BdgProject"
var listMethod = "findWhereOrderby";
var primaryKey = "proappid";
var orderColumn = "conid";
var SPLITB = "`";
var business = "baseMgm";
var gridPanelTitle = "合同:" +　conname  +　"   工程量分摊记录"
var rootText = "工程量分摊";
var unit = new Array();
var treeMoney;
var totalMoney;
var winChooseNode,chooseParentNode,viewWin

Ext.onReady(function (){	
		
	/**你的页面js没全部贴出来我也不好具体写，把我现在的项目里一个类似的代码贴出来你参考一下吧，希望对你能有所帮助
         **此处省略定义的两个panel
         **下面代码是在girdpanel和treepanel都放入到viewport里面即渲染出来了之后再新增的一个excel导入的按钮
          ** 放在gridPanel的toptoolbat的下面
	*/
			
	// 创建viewport加入面板content
    if(Ext.isAir){ 
        var win = new Ext.air.MainWindow({
        	title : gridPanelTitle,
            layout:'border',
            items: [contentPanel,gridPanel],
            title: 'Simple Tasks',
            iconCls: 'icon-show-all'
        }).render();
	}else{
        var viewport = new Ext.Viewport({
            layout:'border',
            items: [contentPanel,gridPanel]
        });
    }
	treePanelNew.render();
	treePanelNew.expand();
	rootNew.expand();
	
	gridPanel.getTopToolbar().add('->');
	var prompt= new Ext.Toolbar.TextItem('<font color=red>实际金额与工程量总金额不相等</font>')
	gridPanel.getTopToolbar().add(prompt);
	gridPanel.getTopToolbar().add(new Ext.Toolbar.TextItem('总金额'));
	gridPanel.getTopToolbar().add(totalField);
	prompt.setVisible(false);
	
	//新增excel导入数据功能的按钮
	var excelExp = new Ext.Toolbar({
		renderTo: gridPanel.tbar,
		items: [{
			text:'excel导入',
			tooltip:'导入之后在左边选择概算树右键菜单进行关联;<br>或事先选好树节点导完之后直接进行选择关联!',
			iconCls: 'upload',
			pressed:true,
			handler:showExcelWin
		},'-',{
			id:'relating',
			text:'关联工程量',
			tooltip:'请选择左边的概算树节点进行关联工程量！',
			iconCls:'btn',
			pressed:true,
			disabled:true,
			handler:showViewWin
		},'-',{
			id:'refreshmoney',
			text:'关联金额',
			tooltip:'点击此按钮刷新左边概算的实际金额!',
			iconCls:'btn',
			pressed:true,
			disabled:true,
			handler:refreshRealMoney
		}]
	});
	
	function refreshRealMoney(){
    	var baseParams = treePanelNew.loader.baseParams
		baseParams.parent = chooseParentNode.attributes.bdgid;		
		treeLoaderNew.load(chooseParentNode)
		chooseParentNode.expand()		
		winChooseNode.fireEvent('click',winChooseNode)
	}

	function showExcelWin(){
		if(!fileWin){
			var fileForm = new Ext.form.FormPanel({
				fileUpload:true,
				labelWidth:30,
				layout:'form',
				baseCls:'x-plain',
				items:[{
					id:'excelfile',
					xtype:'fileuploadfield',
					fieldLabel:'excel',
					buttonText:'excel上传',
					width: 390,
					border:false,
					listeners:{
						'fileselected':function(field,value){
							var _value = value.split('\\')[value.split('\\').length-1]
							if(_value.indexOf('.xls') != -1){
								this.ownerCt.buttons[0].enable()
							}else{
								field.setValue('')
								this.ownerCt.buttons[0].disable()
								Ext.example.msg('警告','请上传excel格式的文件')
							}
						}
					}
				}],
				buttons:[{
					text:'确定',
					iconCls:'upload',
					disabled:true,
					handler:doExcelUpLoad
				}]
			})
			var fileWin = new Ext.Window({
				id:'excelWin',
				title:'excel导入',
//				closeAction:'hide',
				modal:true,
				width:450,
				height:100,
				items:[fileForm]
			})
		}
		fileWin.show()
	}
	
	function doExcelUpLoad(){
		var win = this.ownerCt.ownerCt
		this.ownerCt.getForm().submit({
			waitTitle:'请稍候...',
			waitMsg:'数据上传中...',
			url:MAIN_SERVLET+"?ac=upExcel&bean="+bean+"&business="+business+"&method=insert",
			success:function(form,action){
				Ext.Msg.alert('恭喜',action.result.msg,function(v){
					win.close()
					showViewWin()
				})
			},
			failure:function(form,action){
				Ext.Msg.alert('提示',action.result.msg,function(v){
					win.close()
					showViewWin()
				})
			}
		})
	}	

       /**由于回复内容字数有限制后面代码省略
        */

[zhengxiong1985]

哦，
我的框架是别人写的，
所以对结构不是很清楚，
我看了下。
是这样的：
开始的时候，
我是去建一颗菜单的树，
然后点击不同菜单的时候，
回去调用不同js文件中的方法。
我上面的代码就是在这样一个模块中写的。

现在的问题就是我在renderTo的时候，
实际上grid是还没有渲染的，
所以取不到grid.getTopToolbar（）对象的。

对于你的代码我是这么理解的：
渲染gridPanel的地方是在这儿
var win = new Ext.air.MainWindow({
title : gridPanelTitle,
layout:'border',
items: [contentPanel,gridPanel],
title: 'Simple Tasks',
iconCls: 'icon-show-all'
}).render();
我是门外汉，说错勿怪。

如果是我理解的这样的话，那我知道怎么做了。
不过我还有个问题，
我这个项目里是这么处理的：
当点击菜单的时候，
去调用方法，
方法里面定义了gridPanel对象，
在返回的时候将这个gridPanel返回了，
这个返回操作是不是就是完成渲染的过程呢？

如果是这样的话，
那我要再加一个tbar2的话，
是不是应该在返回这个gridPanel后，
再去调用一个函数，
然后在这个函数里定义这个tbar2呢？

这么做的话，这个tbar2需要怎么去渲染？
也像gridPanel一样返回即可么？

[zhengxiong1985]

我又看了下代码，
发现我这边这个框架做的很难实现啊。
我的代码里面是这样的：
if(node.text == '满足申请的客户'){tab.add(applying());}
这个tab是viewpoint里面定义的。
这个node是指生成的菜单数的节点。
当点击‘满足申请的客户’这个菜单时，
调用applying.js中的applying（）函数，
然后里面返回一个gridPanel，
把这个gridPanel加到tab里面去。

至于怎么加的，还有加进去之后怎么在这个tab里面显示gridPanel，
这个就不清楚了。

具体代码如下：
Ext.onReady(function() {
var Func20023 = null;
var root = new Ext.tree.TreeNode();
var viewport = new Ext.Viewport({
height: 600,
items: [{
html: '管理系统',//'<div class="top"><div class="top1"></div><div class="top3"></div></div>',
baseCls: 'x-plain',
region: 'north'
}, {
autoScroll: true,
expanded: true,
margins: '5 5 4 5',
region: 'west',
root: root,
rootVisible: false,
title: '当前用户',
width: 230,
xtype: 'treepanel'
}, {
id: 'hometab',
items: params(),
margins: '5 5 4 0',
region: 'center',
xtype: 'tabpanel'
}],
layout: 'border'
});

var tab = viewport.items.get(2);
tab.on('add', function(container, component, index) {
this.setActiveTab(component);
});

Ext.Ajax.request({
url: '../ext/combo.action',
params: {function_id:'20010', c_query_type:'1', vc_operator_no: '8888',includeFields: 'l_menu_id,vc_menu_site,vc_menu_caption'},
success: createMenu,
method: 'post',
failure: function(){
alert('error')
}
});
function createMenu(response){
var Func20010 = Ext.decode(response.responseText).records;
var noMenuAuthority = false;
var bigMenu = null;
for(var i = 0; i < Func20010.length; i ++){
var menu = Func20010[i];
if(!menu.vc_menu_site){
alert('对不起，您没有菜单权限，无法进入主页');
noMenuAuthority = true;
window.location.href = '../temp3/index.html';
break;
}

if(menu.vc_menu_site.length == 1){
bigMenu = root.appendChild(
new Ext.tree.TreeNode({
expanded: true,
text: menu.vc_menu_caption,
listeners: {
click: function(node){
alert(2)
}
}
}));
} else if(menu.vc_menu_site.length == 2){
var smallMenu = bigMenu.appendChild(
new Ext.tree.TreeNode({
expanded: true,
text: menu.vc_menu_caption,
id: 'menu' + menu.l_menu_id,
listeners: {
click: function(node){


if(node.text == '成功申请的客户'){
tab.add(applied());
}


}
}
}));
}

}
}
});

[zhengxiong1985]

然后是applied()函数的代码：
function applied(){
var rankTypeCombo = new Ext.form.ComboBox({
name: 'vc_rank_type',
store: new Ext.data.JsonStore({
root: 'records',
fields: ['vc_valuea','vc_caption'],
url: '../ext/combo.action',
autoLoad: false,
baseParams: { function_id: '20023', l_keys: '101', includeFields: 'vc_valuea, vc_caption'}
}),
width: 140,
valueField: 'vc_valuea',
hiddenName: 'vc_rank_type',
displayField: 'vc_caption',
fieldLabel:'等级类型',
allowBlank: true
});
var rankCombo = new Ext.form.ComboBox({
name: 'l_rank_no',
store: new Ext.data.JsonStore({
root: 'records',
fields: ['l_rank_no','vc_rank_name'],
url: '../ext/combo.action',
autoLoad: false,
baseParams: {function_id: '20012',includeFields: 'l_rank_no,vc_rank_name', l_rank_type: '3', l_depart_no: '10000'}
}),
width: 140,
valueField: 'l_rank_no',
hiddenName: 'l_rank_no',
displayField: 'vc_rank_name',
allowBlank: true
});
var branchCombo = new Ext.form.ComboBox({
store: Ext.StoreMgr.add('store-branches', new Ext.data.Store({
reader: new Ext.data.JsonReader({root: 'records' }, ['l_depart_no','vc_depart_name']),
url: '../ext/combo.action',
autoLoad: false,
baseParams: { function_id: '20027', includeFields: 'l_depart_no, vc_depart_name'}
})),
width: 140,
valueField: 'l_depart_no',
hiddenName: 'l_depart_no',
displayField: 'vc_depart_name',
fieldLabel:'营业部号',
allowBlank: true
});
var serviceTypeCombo = new Ext.form.ComboBox({
name: 'c_service_type',
store: new Ext.data.JsonStore({
root: 'records',
fields: ['vc_valuea','vc_caption'],
url: '../ext/combo.action',
autoLoad: false,
baseParams: { function_id: '20023', l_keys: '102', includeFields: 'vc_valuea, vc_caption'}
}),
width: 140,
valueField: 'vc_valuea',
hiddenName: 'c_service_type',
displayField: 'vc_caption',
fieldLabel:'申请类型',
allowBlank: true
});
var userField = new Ext.form.TextField({
name: 'vc_user_no',
maxLength: 10,
anchor: '70%',
allowBlank: true
});
var apply1DField = new Ext.form.DateField({
name: 'l_apply_date1',
maxLength: 10,
anchor: '70%',
allowBlank: true
});
var apply2DField = new Ext.form.DateField({
name: 'l_apply_date2',
maxLength: 10,
anchor: '70%',
allowBlank: true
});
var service1DField = new Ext.form.DateField({
name: 'l_service_date1',
maxLength: 10,
anchor: '70%',
allowBlank: true
});
var service2DField = new Ext.form.DateField({
name: 'l_service_date2',
maxLength: 10,
anchor: '70%',
allowBlank: true
});
var tbar1 = 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
]
});
var grid = new Ext.grid.GridPanel(
{
closable: true,
columns: [
{ width: 50, header: '营业部号' },
{ width: 140, header: '营业部名称' },
{ width: 100, header: '客户编号' },
{ width: 80, header: '用户姓名' },
{ width: 60, header: '等级编号' },
{ width: 130, header: '等级名称' },
{ width: 50, header: '付费方式', renderer: function(value){
return filterColumnByDictionary('1003', value);
}},
{ width: 60, header: '申请类型', renderer: function(value){
return filterColumnByDictionary('102', value);
}},
{ width: 60, header: '服务期限' },
{ width: 70, header: '申请日期' },
{ width: 70, header: '操作员号' },
{ width: 100, header: '操作员名称' },
{ width: 80, header: '指标类型', renderer: function(value){
return filterColumnByDictionary('114', value);
}},
{ width: 170, header: '指标值' },
{ width: 80, header: '备注' }
],
disableSelection: false,
ds: Ext.StoreMgr.add('store-applied', new Ext.data.JsonStore({
autoLoad: false,
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'
})),
listeners: {
beforerender: function(){
Ext.StoreMgr.get('store-branches').load({
callback: function(){
branchCombo.setValue(currentDepartNo);
Ext.StoreMgr.get('store-applied').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', l_depart_no: branchCombo.value};
Ext.StoreMgr.get('store-applied').load();
}
})
}
},
id: 'grid-applied',
bbar: new Ext.PagingToolbar({
store: Ext.StoreMgr.get('store-applied')
}),
title: '成功申请的客户',

tbar: new Ext.Toolbar(
{
id: 'grid.tbar',
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
]
})

});
return grid;
}