Tap or click event for image in Panel

[tijs]

I want something, i would think, reasonable simple namely; doing something when an image in a panel (or the panel itself) is clicked or tapped. Somehow it's not working though...

Context: a carrousel with three images per card (which i stuck in panels) that should each open an overlay with a video when clicked. I have my application layed out. I can do overlays, carrousels and video. But i can't get the d*mn click event to fire...

I've tried for instance:

var look = new Ext.Panel({
    id: name,
    cls: 'look',
    html: '<img src="content/images/' + image + '"></img>',
    listeners: {
        single: true,
        click: function(){
           console.debug('click');
        },
        tap: function(){
           console.debug('tap');
        }
    }
});

neither events fire since i guess Panel has neither event bubbling up. So then i tried:

look.on('click', function(){
    console.log('hi');
    //return false;
}, null, {delegate: 'img'});

but no luck there either. i even tried adding a plugin to the panel that defines a DomObserver along the lines of the example in the docs but i couldn't get that to work, and it seemed overly complex for something simple anyway...

What should i try next?

[tijs]

Cool i think i figured it out. This lazy rendering thing was really tripping me up, requires another way of thinking i guess. but... The following seems to work as advertised:

var look = new Ext.Panel({
     id: name,
     cls: 'look',
     html: '<img src="content/images/' + image + '"></img>',
     afterRender: function() {
         Ext.Panel.superclass.afterRender.apply(this, arguments);
         Ext.EventManager.on(this.id, 'click', function() { console.debug("clicked!"); });
     },

 });

Now if there is a cleaner/better way to achieve this please let me know!

[evant]

Quicker:

new Ext.Panel({
    listeners: {  
        afterrender: function(c){
            c.el.on('click', function(){});
        }
    }
});

In future we're going to add the ability to bind dom level events on components directly via the listeners config, so stay tuned.

[tijs]

In future we're going to add the ability to bind dom level events on components directly via the listeners config, so stay tuned.

Great news!

I would also love to see more tutorials in the spirit of the latest data and infinite carrousel posts. Something like the howtonode site was doing for instance. When your not coming from Ext.js a lot of this stuff is completely foreign while the documentation examples at least seem to expect some kind of basic understanding of the way stuff is done here.

[xueboli]

var look = new Ext.Panel({ id: name, cls: 'look', html: '<img src="content/images/' + image + '"></img>', listeners: { el:{ tap:function(e){ alert('click'); } } }});