How to add a drop down menu on a tabpanel tab ExtJs

Question

I have been trying to add a menu drop down on a tab header. I noticed the tab header can only be changed through the title config property. Is there any other way to include a menu drop down to a tab header?

Answer 1

You can display the dropdown menu on a tab header click like the example below. This example demonstrates when tab header is clicked the menu is displayed at the cursor position.

Ext.application({
    name: 'Fiddle',
    launch: function () {
        var myMenu = Ext.create('Ext.menu.Menu', {
            items: [{
                text: 'Item 1',
                handler: function () {
                    alert('Item 1 clicked');
                }
            }, {
                text: 'Item 2',
                handler: function () {
                    alert('Item 2 clicked');
                }
            }, {
                text: 'Item 3',
                handler: function () {
                    alert('Item 3 clicked');
                }
            }]
        });

        Ext.create('Ext.tab.Panel', {
            width: 400,
            height: 300,
            renderTo: Ext.getBody(),
            items: [{
                title: 'Hello <i class="fa fa-ellipsis-v"></i>', // Using Font Awesome icon
                html: 'Content of Tab 1'
            }, {
                title: ' Hi <i class="fa fa-ellipsis-v"></i>', // Using Font Awesome icon
                html: 'Content of Tab 2'
            }],
            listeners: {
                afterrender: function (panel) {
                    panel.tabBar.items.each(function (tab) {
                        var icon = tab.getEl().down('.fa-ellipsis-v');
                        if (icon) {
                            icon.on('click', function (event) {
                                myMenu.showAt(event.getXY()); // Show the custom menu
                            });
                        }
                    });
                }
            }
        });

    }
});