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