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