ExtJS 4：向选项卡面板标题添加按钮答案

【问题标题】：ExtJS 4 : Adding a button to a tab panel headerExtJS 4：向选项卡面板标题添加按钮
【发布时间】：2013-08-13 02:40:44
【问题描述】：

我正在使用 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 错误，但我想在选项卡面板标题右侧看到的按钮没有出现。你能帮我在标签面板上调出一个按钮吗？

【问题讨论】：

标签： extjs extjs4.2

【解决方案1】：

如果我理解您的问题，您似乎希望按钮位于 tabBar 本身而不是它自己的工具栏中？如果是这种情况，那么您可以使用此小提琴中提供的以下代码。

http://jsfiddle.net/Sadnj/15/

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',
        }]
    }]
});

【讨论】：

其实我同时也得到了答案。但是，感谢您帮助我。接受了你的回答。此外，是否有类似的配置选项可以在常规 Ext.panel.Panel 标题栏上添加按钮？有什么例子吗？
而不是 header:true，使用 header : { items:[...buttons here...] }
至少在 ExtJS 5 中，您还可以使用齿轮、向下、打印等迷你工具。您可以将这样的项目添加到 tabBar 配置：{xtype: 'tool', type: 'down', handler:function(e, target, tabbar, tool){console.log('tool clicked', arguments)} }

【解决方案2】：

你可以用这个：

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'
        }]
    }] 
});

这将为您的标签面板制作按钮。

【讨论】：

嘿布拉德...我尝试了你的建议。这是更新小提琴：jsfiddle.net/ramarajuv/Sadnj/8。它仍然无法正常工作。事实上，它现在什么都没有渲染！我希望你能得到我想要在这里实现的目标。与选项卡位于同一行的按钮...但位于选项卡面板的右侧。
谢谢布拉德。欣赏它。同时得到了答案。

【解决方案3】：

简单地将按钮添加到标签面板标题：

tabBar: {
            items: [
                { xtype: 'tbfill' },//fill the empty space between left and right
                {
                    xtype: 'button',
                    text: 'Button 1'
                }
            ]
        }

【讨论】：