Ext.Toolbar的分行布局

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

经典文章

界面非常漂亮 可以参考

http://apps.hi.baidu.com/share/detail/40996725

另一篇文章

http://blog.sina.com.cn/s/blog_454fbf740100t0xj.html

以上配置适用于 Ext 3.x ，Ext 4.x 不适用。

这句话会报错

listeners : {

                'render':function(){    

                    topbar2.render(panel.tbar);

                }

            }

如下

el is null if (el.insertAdjacentHTML) { 

这句话也试过了，加元素可以，加 tbar ，页面只显示一条线

listeners : {

                'render':function(){    

                topbar.add(topbar2); 

                }

            }

Ext 4 bar 换行，采用 Window 内嵌 panel ，其中 Window 和 panel 都有 tbar 来解决。注意内层 panel border:false