Question

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

我的tabBar：

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

我向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'
        }]
    }]
}

将项目添加到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);
}

将项添加到extjs中tabPanel的tabBar

1 个答案: