Add button in header of tab panel in extjs

Question

I have added a tab panel in Extjs. When i click on second tab i would like to see a component in header area of tab panel, at red mark, below in the image.

Answer 1

I am not sure whether you can insert button inside tab panel or not. I have an alternative. Create a floating panel with required button inside it and show this floating panel at required position .

          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();
        }

Call showButtonNextToLastTab method when you want to show this button to show up and call destroyButtonContainerPanel method when you want to hide this button.

Note : 'myTabPanel' is id of tabPanel in which you want to insert this button.

See if this helps..