Extjs double click event on panel

Question

I would like to add a double click event to a panel. How would I do that? So I have a panel with some html, no other events or clickable items, and I want to be able to capture a double click.

Actually any component that can display a large chunk of html would be okay as long as I can double click it.

I've searched Sencha's docs and there aren't many components with double click events.

Juan Mendes Juan Mendes · Accepted Answer · 2012-09-26T18:08:23

The double click event is not an event of Ext.Components, it's an event of Ext.Element. Since Ext.Components render Ext.Elements they provide a way for you to set handler on those elements the component creates without having to wait for the render event.

Just set a listener for the dblclick event, specifying which Ext.Element in your panel you want to handle. http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-addListener

Here's an example: http://jsfiddle.net/eVzqT/

new Ext.Panel({
    html: 'Here I am',
    title: 'Title',
    width: 400,
    height: 500,
    listeners: {
        dblclick : {
            fn: function() {
                 console.log("double click");
            },
            // You can also pass 'body' if you don't want click on the header or
            // docked elements
            element: 'el'
        }    
    },
    renderTo: Ext.getBody()
});

If you want to be able to handle the event from a controller, you need to relay the event from the element to the component

new Ext.Panel({
    html: 'Here I am',
    title: 'Title',
    width: 400,
    height: 500,
    listeners: {
        dblclick : {
            fn: function(e, t) {
                 this.fireEvent('dblclick', this, e, t);
            },
            // You can also pass 'body' if you don't want click on the header or
            // docked elements
            element: 'el',
            scope: this
        }    
    },
    renderTo: Ext.getBody()
});

That could be abstracted into a plugin

/**
 * Adds an Ext.Element event to a component
 * could be improved to handle multiple events and to allow options for the event
 */
Ext.define('my.plugin.ComponentElementEvent', {
    extend: 'Ext.AbstractPlugin',
    alias: 'plugins.cmp-el-event',

    /**
     * @cfg {String} eventName Name of event to listen for, defaults to click
     */
     eventName: 'click'

    /**
     * @cfg {String} compEl Name of element within component to apply listener to
     *      defaults to 'body'
     */
     compEl: 'body',

    init: function(cmp) {
       cmp.on(this.eventName, this.handleEvent, this, {element: this.compEl});

    },
    handleEvent: function(e,t) {
        this.getCmp().fireEvent(this.eventName, this.getCmp(), e, t);
    }
});

And you could use the plugin like the following

// This panel fires a dblclick event that can be handled from controllers.
new Ext.Panel({
    html: 'Here I am',
    title: 'Title',
    width: 400,
    height: 500,
    plugins: [{ptype: 'cmp-el-event', eventName: 'dblclick', compEl:'el'}
    renderTo: Ext.getBody()
});

Extjs double click event on panel

1 Answers