View Full Version : Scrolling dynamic content

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)
img.lastScale = img.lastScale
img.nextScale = 1;
// if the image is normal, zoom it! (scale = 5)
img.lastScale = img.lastScale
img.nextScale = 5;
//se scrollable content
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',
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?

It also works with pinch!

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