Ext.ux.tab.ContextMenu

Při přepisování Group-Office jsme narazil na zásadní problém. Komponenta Ext.tab.Panel v ExtJS 4, která umožňuje vytvoření záložek, nepodporovala událost contextmenu na jednotlivých tab headers.

Samotné záhlaví záložek je tvořeno nastylovanými tlačítky díky nímž lze zobrazit ke každé záložce ikonu. Nyní zpět k problému. Vzhledem k tomu, že v té době neexistovalo žádné řešení, byl jsem nucen najít jednoduché řešení sám tak, aby ExtJS 4 TabPanel měl obdobnu funkčnost jako ve verzi 3.

Ext.define('Ext.ux.tab.ContextMenu', {
    alias : 'plugin.tabcontextmenu',
    mixins : {
        observable : 'Ext.util.Observable'
    },

    init : function(tabpanel) {
        this.tabPanel = tabpanel;
        this.tabPanel.addEvents('contextmenu');
        this.tabBar = tabpanel.down("tabbar");

        this.mon(this.tabPanel, {
            scope : this,
            afterlayout : this.onAfterLayout,
            single : true
        });
    },
    
    onAfterLayout : function() {
        this.mon(this.tabBar.el, {
            scope : this,
            contextmenu : this.onContextMenu,
            delegate : 'div.x-tab'
        });
    },
    
    onContextMenu : function(event, target) {
        var me = this,
            tab = me.tabBar.getChildByElement(target);
        
        event.preventDefault();
        this.tabPanel.fireEvent(
            'contextmenu', this.tabPanel, tab, event, target
        );
    }
});

Plugin samotný pak v init funkci přidává Ext.tab.Panelu událost contextmenu. Funkce mon není ničím jiným než zkratkou pro addManagedListener. Po vykresleni všech potomků Ext.tab.Panelu je vyvolána událost afterLayout, ve které na tabbar, respektive na všechny elementy div se třídou x-tab nabindujeme událost contextmenu. onContectMenu je funkce, kterou jsme potřebovali. Pomocí funkce getChidByElement si vybereme aktuální tab, na který bylo kliknuto, zakážeme prohlížeči zobrazení defaultního contextového menu a na Ext.tab.Panel zavoláme událost contextmenu s parametry, které jsou kompatibilní s ExtJS 3.

Zdrojový kód můžete také nalézt na Ext JS Community Forum v sekci Ext:User Extensions and Plugins.