在 extjs 的选项卡面板 header 中添加按钮

Question

我在 Extjs 中添加了一个选项卡面板。当我单击第二个选项卡时，我想在选项卡面板的 header 区域中看到一个组件，在图像下方的红色标记处。

Answer 1

我不确定您是否可以在选项卡面板中插入按钮。我有一个选择。创建一个带有所需按钮的浮动面板，并在所需位置显示此浮动面板。

          showButtonNextToLastTab : function(){
               var me = this;
               var lastTab = me.getLastTabInTabPanel();
               var tabWidth = lastTab.getWidth();
               var tabHeight = lastTab.getHeight();
               var btnContainer = Ext.getCmp('btnContainer');
               if(btnContainer == null) {
                   btnContainer = Ext.create('Ext.panel.Panel',{
                       id: 'btnContainer',
                       cls: 'btnContainerCls',
                       floating: true,
                       shadow : false,
                       height : 50,
                       items : [
                                {
                                    xtype : 'button',
                                    id : 'myRequiredButton',
                                    text:'Button',
                                    cls:'requiredBtnCls',
                                    minWidth : tabWidth,
                                    height : tabHeight
                                }
                                ]
                   });
               }
               btnContainer.showBy(lastTab,'tl-tr',[-2,0]);
           },

           getLastTabInTabPanel : function(){
               var me = this;
               var tabPanel = Ext.getCmp('myTabPanel');
               if(tabPanel){
                   var tabBar =  tabPanel.getTabBar();
                   var noOfTabs = tabBar.items.items.length;
                   return tabBar.items.get(noOfTabs-1);
               }
               return null;
           }

        destroyButtonContainerPanel : function(){
            var btnContainer = Ext.getCmp('btnContainer');
            if(btnContainer != null)
                btnContainer.destroy();
        }

当你想显示这个按钮时调用showButtonNextToLastTab方法，当你想隐藏这个按钮时调用destroyButtonContainerPanel方法。

注意：'myTabPanel' 是要插入此按钮的 tabPanel 的 ID。

看看这是否有帮助..

Answer 2

对于 tabpanel 组件遵循另一个建议：

Ext.application({
name : 'TabPanelHeaderButton',

launch : function() {

    Ext.create('Ext.tab.Panel', {
        width: 400,
        height: 400,
        renderTo: document.body,
        items: [{
            title: 'Foo'
        },{
            title: 'Foo 1'
        }],
        tabBar: {
                items: [{
                    xtype: 'tbfill'
                },{
                    xtype: 'button',
                    text: 'Button',
                    padding: '3px',
                    margin: '2px 5px 2px 2px',
                    handler: function(){
                        alert ('Button click')

                    }
                }]
        }
    });

 }
});

在 extjs 的选项卡面板 header 中添加按钮

Add button in header of tab panel in extjs

extjs

header

tabbar

tabpanel