在extjs中将项目添加到tabPanel的tabBar

Question

我有一个无法修改的静态 tabPanel。它没有任何 tabBar 配置。但我想用其中一个子面板向它的 tabBar 添加一些项目（在 tabPanel 右侧添加一些按钮）。我怎样才能做到这一点？我正在使用 extjs 4.2。

我的标签栏：

tabBar: {
    items: [{
        xtype: 'tbfill'
    }, 
    {
        itemId : 'completeButton',
        iconCls : 'icon-complete',
        xtype: 'button',
        text: 'complete'
    }, {
        itemId : 'diagramButton',
        iconCls : 'icon-diagram',
        xtype: 'button',
        text: 'diagram'
    }]
}

将项目添加到 tabBar 的代码：

//childPanel is a direct child of rootTabPanel
//button is a button that should be added to rootTabPanel tabBar
addButton2Toolbar : function(childPanel,button){
    var rootTabPanel = childPanel.up('tabpanel');
    // add button to tabBar of rootTabPanel ?????
}

Answer 1

我已将 fieldcontainer 项添加到 tabBar 并将 tabBars 项移动到 fieldcontainers 项。

tabBar: {
    items: [{
        xtype: 'tbfill'
    }, {
        xtype : 'fieldcontainer',
        itemId : 'toolBar',
        layout : 'hbox',
        items : [ {
            itemId : 'completeButton',
            iconCls : 'icon-complete',
            xtype: 'button',
            text: 'complete'
        }, {
            itemId : 'diagramButton',
            iconCls : 'icon-diagram',
            xtype: 'button',
            text: 'diagram'
        }]
    }]
}

将项目添加到 tabBar 的代码：

//childPanel is a direct child of rootTabPanel
//button is a button that should be added to rootTabPanel tabBar
addButton2Toolbar : function(childPanel,button){
    var rootTabPanel = childPanel.up('tabpanel');
    var toolBar = rootTabPanel.down('fieldcontainer#tabBar');
    toolBar.add(button);
}