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

Add item to tabBar of a tabPanel in extjs

本文关键字：tabPanel tabBar extjs 添加      更新时间：2023-09-26

我有一个静态选项卡面板，我无法修改它。它没有任何选项卡配置。但我想用它的一个子面板向它的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'
    }]
}

将项目添加到选项卡栏的代码：

//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 ?????
}

我已经向tabBar添加了一个fieldcontainer项，并将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'
        }]
    }]
}

将项目添加到选项卡栏的代码：

//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);
}
相关文章：