Extjs Modern Simple Button in Tab Panel Tab Bar

Question

I have a Tab panel with multiple Tabs in it. Now I want to add a simple button with an action to the tab bar. When clicked it should not open a Tab like the other ones, just execute a javascript function.

How is this possible in Extjs?

Answer 1

Yes it is possible. You can do it with tabBar configuration. You will need to add setActive method and will need to handle events to change tabs.

You can also specify different styles for each tab header, have different types of headers and can easily highlight specific tab in custom colors as shown in fiddle.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.Viewport.add({
            xtype: 'panel',
            layout: 'fit',
            title: 'Tab Panel with custom button',
            items: [{
                xtype: 'tabpanel',
                id: 'tabPanel',
                tabBar: {
                    items: [{
                        xtype: 'button',
                        text: 'Batman',
                        ui: 'action',
                        setActive: function (active) {
                            this.setPressed(active);
                        },
                        handler: function () {
                            var tabPanel = Ext.getCmp('tabPanel');
                            tabPanel.setActiveItem(0);
                        }
                    }, {
                        xtype: 'button',
                        text: 'Goku',
                        ui: 'action',
                        setActive: function (active) {
                            this.setPressed(active);
                        },
                        handler: function () {
                            var tabPanel = Ext.getCmp('tabPanel');
                            tabPanel.setActiveItem(1);
                        }
                    }, {
                        xtype: 'spacer',
                        setActive: function () {}
                    }, {
                        xtype: 'button',
                        text: 'Custom button',
                        ui: 'decline',
                        setActive: function () {},
                        handler: function () {
                            Ext.Msg.alert('Custom Message', 'This way you can do custom js function execution on tab bar');
                        }
                    }]
                },
                items: [{
                    items: [{
                        html: 'Batman is cool'
                    }]
                }, {
                    items: [{
                        html: 'Goku can defeat superman'
                    }]
                }]
            }]
        });
    }
});

Example Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/29r1