Why doesn't a simple click: function()… work in ExtJS?

Question

When the user clicks on this element, I want it to show an alert.

However, when I click on the DIV that this Panel generates, nothing happens.

How ca

Answer 1

The following sample is a bit rough but it works for me. It is a panel with a box component, which is showing a thumbnail. When clicking on the thumbnail, it is showing a lightbox with slimbox2. Not pretty, but very effective. The hardcoded images are just for test here.

var panel = new Ext.Panel({
        title       : 'Image',
        header      : false,
        frame       : true,
        border      : false,
        bodyStyle   : 'padding : 5px',
        width       : 125,
        items       : [{
            xtype      : 'box',
            height     : 115,
            width      : 115,
            listeners : {
                'render': function() {
                    var id = Ext.id(this);                            
                    Ext.fly(id).addListener('click', function () {
                        jQuery.slimbox('thisisnotanimage', 'CBX');
                    });                            
                }
            },
            autoEl: {
                tag : 'div',
                html : 'somehtmltagstuff' 
            }   
        }
        ]
    });