2

パネルにダブルクリック イベントを追加したいと思います。どうすればいいですか？したがって、いくつかの html を含むパネルがあり、他のイベントやクリック可能なアイテムはなく、ダブルクリックをキャプチャできるようにしたいと考えています。

実際には、HTML の大きなチャンクを表示できるコンポーネントは、ダブルクリックできる限り問題ありません。

Sencha のドキュメントを検索しましたが、ダブルクリック イベントを持つコンポーネントはあまりありません。

4

1 に答える 1

8

ダブルクリック イベントは のイベントではなく、Ext.ComponentのイベントですExt.Element。Ext.Componentsrender 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()
});​
于 2012-09-26T18:08:23.260 に答える