PDA

View Full Version : Scrolling dynamic content



greenkey_loman
22 Aug 2011, 3:41 AM
Hi all,
I'm having some problems using scale and scroll together, here is the code.



galleryPanel = new Ext.Carousel({
style: "text-align: center;",
defaults: {
listeners: {
el: {
doubletap: function(evt, img) {
// is the image ever been scaled?
img.lastScale = img.lastScale>0 ? img.lastScale : 1;
// if the image is big, reduce (scale = 1)
if(img.lastScale>1){
img.lastScale = img.lastScale
img.nextScale = 1;
galleryPanel.getActiveItem().setScrollable(false);
// if the image is normal, zoom it! (scale = 5)
}else{
img.lastScale = img.lastScale
img.nextScale = 5;
//se scrollable content
galleryPanel.getActiveItem().setScrollable('both');
}
myLog('start: lastScale='+img.lastScale);
img.style.webkitTransform = 'scale3d('+img.nextScale+','+img.nextScale+',1)';
img.lastScale = img.nextScale;
myLog('end: lastScale='+img.lastScale);
}
}
},
scroll: 'both',
cls:"galleryImage"
},
items: [
{html:"<img src='img/moto-tech.jpg' />"},
{html:"<img src='img/moto-tech-2.jpg' />"},
{html:"<img src='img/moto-tech-3.jpg' />"}
]
});


If I double tab the image in Chrome, I can scroll only right and down. Then when I double-tap again the image disappear (maybe is too little to be seen).
If I test it in iOS I can't scroll.

I think it's about the Panel dimensions. Maybe the Panel (the Carousel item) needs to be "refreshed".
I already tried doComponentLayout but it doesn't work.

Anyone knows how to do it?

PS
It also works with pinch!

greenkey_loman
23 Aug 2011, 1:51 PM
Maybe I've been not enough clear... or maybe it's a really hard issue...
:-?