Hybrid View

  1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
    dakamojo is on a distinguished road

      0  

    Default Answered: Tap event for Panel?

    Answered: 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?

  2. Just add the tap event listeners in the initialize method.

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

  3. #2
    Touch Premium Member
    Join Date
    Nov 2007
    Posts
    38
    Vote Rating
    0
    knifegun is on a distinguished road

      0  

    Default


    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;
            }
        },
        ...
    });

  4. #3
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    Answers
    93
    rdougan will become famous soon enough

      0  

    Default


    Just add the tap event listeners in the initialize method.

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

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    34
    Vote Rating
    0
    dakamojo is on a distinguished road

      0  

    Default


    Quote Originally Posted by rdougan View Post
    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.

  6. #5
    Sencha User
    Join Date
    Mar 2010
    Location
    India
    Posts
    10
    Vote Rating
    0
    Arindam Das is on a distinguished road

      0  

    Default Hope this helps

    Hope this helps


    Code:
    Ext.define('My.component.TappablePanel', {
        extend: 'Ext.Panel',
        initialize: function () {
            this.element.on('tap', function(){
                this.tap();
            }, this);
        },
        tap: function() {
            console.log('tapped me - from super class');
        }
    });
    And now ...

    Code:
    Ext.define('My.view.MyTapPanel', {
        extend: 'My.component.TappablePanel',
        // override the tap event from super class
        tap: function() {
            console.log('tapped me - from child class');
        }
    });