Как добавить раскрывающееся меню на вкладке панели вкладок ExtJs

Вы можете отобразить раскрывающееся меню при щелчке по заголовку вкладки, как показано в примере ниже. В этом примере показано, что при щелчке по заголовку вкладки меню отображается в позиции курсора.

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

    }
});