CODEWITHSUNDEEP
sencha-touch-2
coure2011
coure2011

Reputation: 42444

tap event not working in view

Please check the code below, what I am doing wrong? I want to output to console when tap event on body.

 Ext.define('iApp.view.LoginView', {
    extend: 'Ext.Panel',
    xtype: 'loginViewPanel',

    config: {
        style: "background-color: #3f3f3f;",
        html: 'hello world',
        listeners: {
            el: {
                tap: function() {
                    console.log('tapped');
                }
            }
        }
    }
});

no output to console...

Upvotes: 1

Views: 7591

Answers (4)

Arindam
Arindam

Reputation: 537

A simpler and cleaner way of getting Tappable Panels 

 Ext.define('My.component.TappablePanel', {
    extend: 'Ext.Panel',
    initialize: function () {
        this.element.on('tap', function(){
            this.tap();
        }, this);
    },
    tap: function() {
        console.log('I heard the tap!');
    }
});

And it can be overridden in child classes like so...

Ext.define('My.view.TestPanel', {
    extend: 'My.component.TappablePanel',
    config: {
        html: 'Tap this panel',
        style: 'background-color: #5E99CC'
    },
    tap: function() {
        console.log('I handled the tap');
    }
});

Upvotes: 0

nuthan
nuthan

Reputation: 465

Ext.define('app.view.Card', {
config : {
    layout : 'card',
    items : [{
        xtype : 'panel',
        docked : 'top',
        html : "<img width='320px'  id='image1' src='images/im.jpg'/>",

        listeners : {
            touchstart : {
                element : 'element',
                fn : function() {
                    console.log('tapped')

                }
            }
        }
    }]
},
initialize : function() {
    // if recording/handling the event in the controller.
    this.relayEvents(this.element, ['tap']);
}
});

Upvotes: 0

user1831158
user1831158

Reputation: 31

If you want to select an element by class or id, it's cleaner to use the delegate option:

var component = Ext.Viewport.add({
width: 300,
height: 300,
style: 'background: red',
html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
listeners: {
    tap: {
        element: 'element',
        delegate: '#test',
        fn: function(e) {
            alert('Element with id "test" was tapped!');
        }
    }
}
});

Upvotes: 3

rdougan
rdougan

Reputation: 7225

You are using an old version of adding an element listener.

If you use the compat version fo Sencha Touch 2, it should give you a warning in the console like this:

console warning

So your code should look something like this:

Ext.define('iApp.view.LoginView', {
    extend: 'Ext.Panel',
    xtype: 'loginViewPanel',

    config: {
        style: "background-color: #3f3f3f;",
        html: 'hello world',
        listeners: {
            tap: {
                element: 'element',
                fn: function() {
                    console.log('tapped');
                }
            }
        }
    }
});

You can find out more information about the changes on the Sencha Forums.

Update

If you want to delegate to a child of the item, you must still target element, and then within your function check if the tapped element is the one you want:

var component = Ext.Viewport.add({
    width: 300,
    height: 300,
    style: 'background: red',
    html: 'Tap me<div id="test" style="background:blue;">Only this will alert</div>',
    listeners: {
        tap: {
            element: 'element',
            fn: function(e) {
                var element = Ext.get(e.target);
                if (element.id == "test") {
                    alert('tap!');
                }
            }
        }
    }
});

Upvotes: 5

Related Questions