パネルにダブルクリック イベントを追加したいと思います。どうすればいいですか?したがって、いくつかの html を含むパネルがあり、他のイベントやクリック可能なアイテムはなく、ダブルクリックをキャプチャできるようにしたいと考えています。
実際には、HTML の大きなチャンクを表示できるコンポーネントは、ダブルクリックできる限り問題ありません。
Sencha のドキュメントを検索しましたが、ダブルクリック イベントを持つコンポーネントはあまりありません。
ダブルクリック イベントは のイベントではなく、Ext.Component
のイベントですExt.Element
。Ext.Components
render s であるため、イベントExt.Element
を待たずに、コンポーネントが作成する要素にハンドラーを設定する方法を提供します。render
パネルで処理したいものをdblclick
指定して、イベントのリスナーを設定するだけです。http://docs.sencha.com/ext-js/4-1/#!/api/Ext.panel.Panel-method-addListenerExt.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()
});
それはプラグインに抽象化できます
/**
* 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()
});