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

时间:2013-08-13 02:40:45

标签: extjs extjs4.2

我正在使用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错误,但我想要在选项卡面板标题右侧看到的按钮不会出现。你能帮忙我如何在标签面板上弹出一个按钮吗?

3 个答案:

答案 0 :(得分:7)

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

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

答案 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'
                }
            ]
        }