Tap event for Panel?

I have an application that has several Panels. Each panel host other components. I want to capture the event when the user touches anywhere in the Panel. In essence each Panel is like a big button.

How do I do this?

This is what I did but it for some reason does not work on iOS but works on the browser:

Code:

---

Ext.define('app.view.MyView', {
    extend: 'Ext.Panel',
    ...
    initialize: function() {
        this.tapHandlerEnabled = false;

        this.on({
            scope: this,
            painted: 'onPainted'
        });
    },

    onPainted: function() {

        if (!this.tapHandlerEnabled) {
           
            var _this = this;
            this.element.on('tap', function(event, html, obj) {
                ...
                _this.handleSelectionEvent(xCoor, yCoor);
            });

            this.tapHandlerEnabled = true;
        }
    },
    ...
});

---

Just add the tap event listeners in the initialize method.

Code:

---

    initialize: function() {
        this.element.on({
                    tap: function() { console.log('tapped!'); }
        });
    }

---

Quote:

---

Originally Posted by rdougan

Just add the tap event listeners in the initialize method.

Code:

---

    initialize: function() {
        this.element.on({
            tap: function() { console.log('tapped!'); }
        });
    }

---

---

Thanks, that did it.