Extjs面板上的双击事件

Question

我想在面板中添加双击事件.我该怎么办？所以我有一个带有一些html的面板,没有其他事件或可点击的项目,我希望能够捕获双击.

实际上,任何可以显示大量html的组件都可以,只要我可以双击它.

我搜索过Sencha的文档,双击事件的组件不多.

Answer 1

双击事件不是Ext.Components 的事件,它是一个事件Ext.Element.从Ext.Components渲染开始,Ext.Element它们为您提供了一种方法,可以在组件创建的元素上设置处理程序,而无需等待render事件.

只需为dblclick事件设置一个监听器,指定Ext.Element要在面板中处理的事件.http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-addListener

这是一个例子: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()
});?

如果您希望能够从控制器处理事件,则需要将事件从元素中继到组件

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

这可以抽象成一个插件

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

你可以像下面这样使用插件

// 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()
});?