22.Extjs Panel中显示多行工具栏(tbar)

转自：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);

}
  }
 });
});