View Full Version : Using a handler: with carousel items?

19 Jul 2010, 2:23 PM
Hi there,

I have a carousel, and I want to be able to click on each photo in the carousel and see a larger photo. I looked at the examples, and I want it to look like the "overlay" example, but instead of clicking on toolbar items, you're clicking on carousel items. When I do it, though, nothing happens. Here's my code:

var overlay = new Ext.Panel({
title: 'Hi',
html: 'Yo',
floating: true,
centered: true,
modal: true,
width: 800,

var showCenteredOverlay = function(btn, event) {
overlayTb.setTitle('Centered Overlay');

var carousel2 = new Ext.Carousel({
indicator: true,
direction: 'vertical',
centered: true,
cls: 'card',
ui: 'light',
height: 400,
items: [{
title: 'Tab 1',
html: '<img src="images/vanwittel_450.jpg" style="margin:40px;" /><p>Gaspar Van Wittel <span class="years">(1653-1736)</span><br />Piazza del Popolo <span class="years">(1678)</span></p>',
handler: showCenteredOverlay
title: 'Tab 2',
html: '<img src="images/piranesi_450.jpg" /><p>Piranesi</p>'
title: 'Tab 3',
html: '<img src="images/panini_450.jpg" /><p>Panini</p>'

19 Jul 2010, 9:51 PM
Components (in this case, Panel) don't have handlers, since there's not one really "correct" action, like a button tap. You need to attach it to the underlying element:

title: 'Tab 1',
html: '<img src='...' />
listeners: {
afterrender: function(c){
c.body.child('img').on('click', showCenteredOverlay);

20 Jul 2010, 11:36 AM
Thanks, that worked (in a way). If I get rid of .child('img') it works, but if I don't I get an error saying that it is null. Weird!