Ext中显示多行tbar方法

var oneTbar = new Ext.Toolbar(
{
 items :
 [
 {
  text : '复制'
 },
 {
  text : '粘贴'
 } ]
});

var twoTbar = new Ext.Toolbar(
{
 items :
 [ new Ext.Toolbar.TextItem('工具栏：') //显示文本 
  ]
 });

var threeTbar = new Ext.Toolbar(
{

 items :
 [
 {
  xtype : "tbfill" //后面的tools显示在右边 
 },
 {
  pressed : true,
  text : '刷新'
 } ]
});

var win = new Ext.Window(
{

 title : '演示多行tbar',
 width : 500,
 height : 300,
 modal : false,
 renterTo : Ext.getBody(),
 items :
 [
 {
  xtype : 'panel',
  tbar :
  [
  {
   text : '添加'
  }, '-',
  {
   text : '删除'
  }, '-',
  {
   text : '修改'
  } ],
  listeners :
  {
   'render' : function()
   {
    oneTbar.render(this.tbar); //add one tbar
    twoTbar.render(this.tbar); //add two tbar
    threeTbar.render(this.tbar); //add three tbar
   }
  }
 } ]

});
win.show();

 

要点 1

var oneTbar=new Ext.Toolbar

能被 rander 的 tbar 不能为普通的 js 数组

要为 Ext.Toolbar 类型

 

要点 2

window 或者 grid 中的

tbar :[{text:'添加'},'-',{text:'删除'},'-',{text:'修改'}],

不能为空，否则整个页面布局混乱

 

要点 3

再次理解

listeners 和 this

注意：这一方法对 Panel，FormPanel，GridPanel 都有效

但是对 Window 无效，所以要在 Window 中嵌入 Panel