PDA

View Full Version : Launching a pop-up from within a Carousel



SpikeWeb
13 Jul 2010, 4:24 PM
Hi,

I have been trying to get a popup working, similar to the one shown in the Kiva example (LoanInfo), but I want mine to launch from within a carousel. My first question is whether this is possible or if there is something within the carousel which will get in the way?

My second question is, if this is possible are there any examples of this working which I could look at?

Thanks Sencha Team.

TommyMaintz
14 Jul 2010, 12:36 PM
I see no reason this wouldnt work. You will want to listen to the tap event on the body of your carousel, and in the handler create a new Panel with floating: true and your content.

The concept of creating and showing the overlay is the same as in the Kiva example. The binding of the tap event could look something like the following.



carousel.body.on('tap', function() {
// create your overlay here
});

daveamos
15 Jul 2010, 2:04 PM
I tried doing this to my carousel, but I'm getting a "carousel2.body is not defined". I assumed if I had a carousel with the name "carousel2", the .body would just come with it. Am I missing something? Here's the relevant code:


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</p>'
},
{
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>'
}]
});

carousel2.body.on('tap', function() {
var overlay = new Ext.Panel({
title: 'Hi',
html: 'Yo',
floating: true
});
});

SpikeWeb
26 Jul 2010, 9:21 PM
Hi daveamos. Have you had any luck? I haven't...

evant
26 Jul 2010, 10:06 PM
As Tommy said, bind a listener on the body click (in this case, I use a delegate to filter).



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
listeners: {
afterrender: function(c){
c.body.on('click', function(){
var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: false,
height: 200,
height: 200,
html: 'I am an overlay'
}).show();
}, null, {delegate: 'span.open'});
}
},
items: [{
html: 'this won\'t work, <span class="open">this will though.</span>'
},
{
html: '<span class="open">click me</span>'
},
{
html: '<span class="open">first</span> word should be clicked on'
}]
});


new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: carousel
});
}
});

Luxury
6 Aug 2010, 6:44 PM
evant and others,

Code works great for a single style of pup-up. Is there a way to assign a "popup image1" to image1 and "popup image2" to image2. Sample code below...

Be kind people... I'm a network eng, just learning to program a little - so the code isn't DRY... I just learned the word DRY yesterday, so figuring out how to be should take another day or two...


title: 'Tab 2',
listeners: {
afterrender: function(c){
c.body.on('click', function(){

var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 912,
height: 612,
html: '<img src="cover2010.jpg" width="900">'
}).show();
}, null, {delegate: 'span.open1'});
}

},
listeners: {
afterrender: function(c){
c.body.on('click', function(){

var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: true,
width: 912,
height: 612,
html: '<img src="toc.jpg" width="900">'
}).show();
}, null, {delegate: 'span.open2'});
}

},

items: [{
html: '<h1>About</h1><p>This is a test <span class="open2"><img src="toc.jpg" class="floatLeft" width="70%"></span> and another test and another test and another test and another test and another test and another test and another test and another test and another test and another test and another test and another test and another test and another test and another test and another test<span class="open1"><img src="cover1024.jpg" class="floatRight" width="70%"></span></p>'
},]
},

evant
8 Aug 2010, 8:55 PM
Slightly modified:



Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
listeners: {
afterrender: function(c){
c.body.on('click', function(event, target){
var html = '',
el = Ext.get(target);

if(el.hasClass('open1')){
html = 'item1';
}else if(el.hasClass('open2')){
html = 'item2';
}else{
html = 'item3';
}

var overlay = new Ext.Panel({
floating: true,
modal: true,
centered: false,
height: 200,
height: 200,
html: html
}).show();
}, null, {delegate: 'span.open'});
}
},
items: [{
html: 'this won\'t work, <span class="open open1">this will though.</span>'
},
{
html: '<span class="open open2">click me</span>'
},
{
html: '<span class="open open3">first</span> word should be clicked on'
}]
});


new Ext.Panel({
fullscreen: true,
layout: 'fit',
items: carousel
});
}
});

SpikeWeb
15 Sep 2010, 6:37 PM
I have got this working however the pop-up takes about 2 seconds to show when tested on an iPad. When I test in Safari and simulate the iPad it pops up immediately.

Has anyone else found this spped issue?

My client thinks this is a pretty big problem because it doesn't seem to be responsive to their tap, so they tap again, and inadvertantly close the pop up just as it is opening.