在extjs

Question

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

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')

                    }
                }]
        }
    });

 }
});