extjs - 面板上的 Extjs 双击事件

Question

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

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

我搜索了 Sencha 的文档，并没有很多带有双击事件的组件。

Answer 1

双击事件不是 s 的事件，是Ext.Components 的事件Ext.Element。由于Ext.Componentsrender 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()
});​