PDA

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



daveamos
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,
height:400
});

var showCenteredOverlay = function(btn, event) {
overlay.setCentered(true);
overlayTb.setTitle('Centered Overlay');
overlay.show();
};

var carousel2 = new Ext.Carousel({
indicator: true,
direction: 'vertical',
centered: true,
cls: 'card',
ui: 'light',
height: 400,
width:512,
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>'
}]
});

evant
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);
}
}
}

daveamos
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!