面板上的Extjs雙擊事件

Question

我想向面板添加雙擊事件。我會怎麼做？所以我有一個面板有一些HTML，沒有其他事件或可點擊的項目，我想能夠捕獲雙擊。

其實任何可以顯示大塊html的組件都可以，只要我可以雙擊它即可。

我搜索了Sencha的文檔，並沒有很多雙擊事件的組件。

Answer 1

雙擊事件不是Ext.Component s的事件，這是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() 
});​