Extjs中grid的tbar多行显示问题

Question

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

Answer 1

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

Answer 2

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

Answer 3

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,viewWinExt.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()
})
}
})
}        /**由于回复内容字数有限制后面代码省略
        */

Answer 4

哦，
我的框架是别人写的，
所以对结构不是很清楚，
我看了下。
是这样的：
开始的时候，
我是去建一颗菜单的树，
然后点击不同菜单的时候，
回去调用不同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一样返回即可么？

Answer 5

我又看了下代码，
发现我这边这个框架做的很难实现啊。
我的代码里面是这样的：
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());
      }
     
     
      }
      }
      }));
      }
     
}
}
});

Answer 6

然后是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_re' ],
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;
}