Question

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

实际上任何可以显示大块html的组件都可以，只要我可以双击它。

我搜索过Sencha的文档，双击事件的组件不多。

Answer 1

双击事件不是Ext.Component的事件，而是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()
});

Extjs面板上的双击事件

1 个答案: