CODEWITHSUNDEEP
extjsheadertabbartabpanel
Sparrow
Sparrow

Reputation: 355

Add button in header of tab panel in extjs

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. enter image description here

Upvotes: 3

Views: 4098

Answers (2)

jose
jose

Reputation: 1562

For a tabpanel component follows another suggestion:

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

                    }
                }]
        }
    });

 }
});

Upvotes: 3

Harshal
Harshal

Reputation: 946

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..

Upvotes: 1

Related Questions