패널에서 Extjs 두 번 클릭 이벤트

Question

패널에 두 번 클릭 이벤트를 추가하고 싶습니다. 내가 어떻게 그럴 수 있니? 그래서 일부 HTML, 다른 이벤트 또는 클릭 할 수있는 항목이있는 패널이 있으며 두 번 클릭을 캡처 할 수 있기를 원합니다.

사실 큰 hunk html을 표시 할 수있는 구성 요소는 두 번 클릭 할 수있는 한 괜찮습니다.

Sencha의 문서를 검색 한 결과 두 번 클릭 이벤트가 많은 구성 요소가 없습니다.

Answer 1

두 번 클릭 이벤트의 이벤트가 Ext.Component이 아니며, Ext.Element의 이벤트입니다. Ext.Components은 Ext.Element을 렌더링하므로 컴포넌트가 render 이벤트를 기다리지 않고 생성 한 요소에 대해 처리기를 설정할 수있는 방법을 제공합니다.

dblclick 이벤트에 대한 수신기를 설정하여 처리 할 패널의 Ext.Element을 지정하면됩니다. 당신이 컨트롤러에서 이벤트를 처리 할 수있게하려면 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() 
});​ 

에 요소에서 이벤트를 중계 할 필요가 : 여기

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-addListener은 예입니다 플러그인으로 추상화 될 수 있습니다.

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

그리고 다음과 같은 플러그인을 사용할 수 있습니다.