我正在使用ExtJS 4并尝试在标签面板标题上添加按钮。请看看这个jsfiddle:
http://jsfiddle.net/ramarajuv/Sadnj/7/。只需两个选项卡,您就可以看到它正常工作。现在,通过添加tabBar修改相同的代码,如下所示:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 300,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tabBar:[{
dockedItems:[{
xtype: 'button',
text : 'Test Button'
}]
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
没有抛出Javascript错误,但我想要在选项卡面板标题右侧看到的按钮不会出现。你能帮忙我如何在标签面板上弹出一个按钮吗?
答案 0 :(得分:7)
如果我理解你的问题,你似乎希望按钮位于tabBar本身而不是它自己的toobar中?如果是这种情况,那么您可以使用此小提琴中提供的以下代码。
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
id: 'testPanel',
height: 200,
width: 200,
items: [{
xtype: 'tabpanel',
activeTab: 1,
tabBar: {
items: [{
xtype: 'tbfill'
}, {
xtype: 'button',
text: 'Test Button'
}]
},
items: [{
title: 'tab1',
}, {
title: 'tab2',
}]
}]
});
答案 1 :(得分:1)
你可以用这个:
Ext.create('Ext.panel.Panel',{
renderTo : Ext.getBody(),
id : 'testPanel',
height : 200,
width : 200,
items: [{
xtype : 'tabpanel',
activeTab : 1,
tbar:[{
text : 'txtButton'
}],
items: [{
title: 'tab1'
},{
title: 'tab2'
}]
}]
});
这将为您的tabpanel制作按钮。
答案 2 :(得分:0)
只需将按钮添加到tabpanel标头即可:
tabBar: {
items: [
{ xtype: 'tbfill' },//fill the empty space between left and right
{
xtype: 'button',
text: 'Button 1'
}
]
}