PDA

View Full Version : How do I trigger a unique popup on a listener for all items in my carousel?



digeridoo
17 Aug 2011, 1:07 PM
Hi,

I need some help trying to have a unique popup for each of my items in my carousel. This is how I have done it so far. I have defined a whole bunch of thumbnails in my carousel like this:


var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="page1thumb.jpg" />'

},{
flex: 1,
html: '<img src="page2thumb.jpg" />'
}]
},{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="page1thumb.jpg" />'
},{
flex: 1,
html: '<img src="page2thumb.jpg" />'
}]
},

{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="page1thumb.jpg" />'
},{
flex: 1,
html: '<img src="page2thumb.jpg" />'
}]
},
{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="page1thumb.jpg" />'
},{
flex: 1,
html: '<img src="page2thumb.jpg" />'
}]
},

{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="page1thumb.jpg" />'
},{
flex: 1,
html: '<img src="page2thumb.jpg" />'
}]
}


]
},



I have a popup that I have coded like this:


var slide1 = new Ext.Panel({
floating: true,
modal: true,
centered: true,
layout: {
type: 'vbox',
pack: 'center'
},
items: [{
xtype: 'video',
url: 'http://dev.sencha.com/deploy/touch/examples/video/space.mp4',
loop: true,
width: 500,
height: 400,
posterUrl: 'http://dev.sencha.com/deploy/touch/examples/video/space.mp4Screenshot.png'
}]
});


...but now I am stuck at the event listeners. How would I define slide1 above to popup on my first thumbnail, then 'slide2' to popup on the second etc? I understand that attaching one event listener to the parent (carousel1) is the preferred method as it's better for memory, but I have no idea how I can trigger different popups depending on which one I click on using this method.

Any help would be greatly appreciated,

Si

digeridoo
20 Aug 2011, 5:53 AM
After much fiddling I've figured it out!

There is probably a better way to do it, and any ideas to improve the code would be appreciated. At the moment I have 8 listeners, 1 for each thumbnail but I think I understand that it may be possible to just have one, defined as a template, calling each different popup? But I'm not sure exactly how I would set this up.

Also I have defined 8 separate popup windows, if you look at the carousel code below you can see it calls a separate popup (popup1, popup2 etc) for each thumbnail.

Here is the code for my popup, which popups up a floating carousel with 3 pages on the click of a thumbnail:


var popup1 = new Ext.Carousel({
floating: true,
modal: true,
centered: true,
padding: 5,
width: 800,
height: 600,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
title: 'Slide 1',
}
],
items: [
{
html: 'This is a test',
}, {
title: 'Tab 2',
html: '<img src="cricket.jpg"/>',
}, {
title: 'Tab 3',
html: '3'
}]
});

Here's the code for my carousel, I have added a listener to each thumbnail, that triggers a separate popup for each thumbnail (I have 8 thumbnails at the moment).


var carousel1 = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="1.jpg" />',
listeners: {
afterrender: function(c){
c.body.select('img').on('click', function(e, t){
popup1.show('pop');
});
}
}
},{
flex: 1,
html: '<img src="2.jpg" />',
listeners: {
afterrender: function(c){
c.body.select('img').on('click', function(e, t){
popup2.show('pop');
});
}
}
}]
},

{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="3.jpg" />',
listeners: {
afterrender: function(c){
c.body.select('img').on('click', function(e, t){
popup3.show('pop');
});
}
}
},{
flex: 1,
html: '<img src="4.jpg" />',
listeners: {
afterrender: function(c){
c.body.select('img').on('click', function(e, t){
popup4.show('pop');
});
}
}
}]
},
{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
html: '<img src="5.jpg" />',
listeners: {
afterrender: function(c){
c.body.select('img').on('click', function(e, t){
popup5.show('pop');
});
}
}
},{
flex: 1,
html: '<img src="6.jpg" />',
listeners: {
afterrender: function(c){
c.body.select('img').on('click', function(e, t){
popup6.show('pop');
});
}
}
}]
},

digeridoo
19 Sep 2011, 12:52 PM
Just thought I'd mention it...this post looks useful and a more efficient way of doing it (I am yet to implement it):

http://www.sencha.com/forum/showthread.php?147328-Adding-listener-to-an-element-in-a-XTemplate&highlight=listener+tpl

Eventually I would like to improve the coding and efficiency of my app. I would like to make best use of templates, and it looks like the above post would be best practice.

:-)

Si