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

我正在使用ExtJS4并尝试在选项卡面板标题上添加按钮。请看一下这个JSFIDLE：

。您可以看到，仅使用两个选项卡就可以很好地工作。现在，通过添加选项卡栏修改相同的代码，如下所示：

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错误，但是我想看到的选项卡面板标题右侧的按钮没有出现。您能帮助我如何打开选项卡面板上的按钮吗？

您可以使用：

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

---

这将为您的选项卡面板创建按钮。

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

---

使用以下命令将按钮添加到选项卡面板标题：

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

---

嘿，布拉德。。。我试了你的建议。以下是更新提琴：。它仍然不起作用。事实上，它现在什么都没有呈现！我希望你得到了我在这里想要实现的东西。与选项卡位于同一行的按钮。。。但在选项卡面板的右侧。谢谢Brad。谢谢。同时得到了答案。我实际上同时得到了答案。不过，谢谢你帮我。我接受了你的回答。另外，是否有类似的配置选项可用于在常规Ext.panel.panel标题栏上添加按钮？有没有示例？在ExtJS 5中使用header:{items:[…buttons here…]}而不是header:true，至少您还可以在gear、down、print等迷你工具上使用header:{items:[…buttons here…]}。您可以将类似的项添加到tabBar配置中：

{xtype:'tool'，type:'down'，handler:function（e，target，tabBar，tool）{console.log（'tool clicked'，arguments）}

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