转自：http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html

在应用程序的制作中，我们经常性的会用到工具栏，在Extjs中Panel中提供了tbar和bbar两个内置的工具栏，极大的方便了大家的使用，但是在创建多行工具栏的时候，就会有一些问题产生了，不能正常的显示已经设计好的页面。下面通过对Panel的render事件的监听，在它被渲染的时候添加多条工具栏，这样就不会影响页面的显示了。这一方法对Panel，FormPanel，GridPanel都适用。具体代码如下：

Ext.onReady(function(){ 
  var tbar1 = new Ext.Toolbar([ 
     {

text:'添加按钮'},{

text:'修改按钮'},{

text:'删除按钮'}]); 
    
  var main = new Ext.Panel({ 
     title:'一个面板', 
     border:false, 
     tbar : [{

text:'一个按钮'}], 
     listeners : { 
       'render': function(){ 
            tbar1.render(main.tbar); 
        } 
     } 
  }); 
  main.render(document.body); 
});

 

另一个方法，设置EditorGridPanel中两个tbar：

 

Ext.onReady(function(){

var grid = new Ext.grid.EditorGridPanel({

  store : ds,

  cm : cm,

  width : 688,

  height : 300,

  selModel : new Ext.grid.RowSelectionModel(),

  autoScroll : true,

  stripeRows : true,

  enableColumnMove : false,

  clicksToEdit : 1,

  tbar : ['->', {

   xtype : 'button',

   text : '添加',

   iconCls : 'icon-add',

   handler : function() {}))

   }

  }, '-', {

   xtype : 'button',

   text : '删除',

   iconCls : 'icon-delete',

   handler : function() {}

  }, ' '],

  listeners : {

   'render' : function() {

    var tbar1 = new Ext.Toolbar(['->', {

     text : "设置",

     iconCls : 'icon-set',

     handler : function() {

     }

    }, ' ']);

    tbar1.render(grid.tbar);

   }

  }

 });
});