PDA

View Full Version : Pinch event stops firing when a table becomes too big



pogotc
11 Jun 2011, 7:42 AM
I have a table of information and I'd like users to be able to zoom into it using the pinch zoom and pan round it using the drag event.
I've managed to get something simple working using an image but if I swap it for a html table it only seems to work when there are less than 200 or so elements. If I go beyond that the pinch event stops firing although drag continues to work, is this a bug or is there something else I need to do to make this work? I've posted my code below, for now it's just using placeholder code generated by a loop at the bottom.

My html code is


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sencha Test</title>
<link rel="stylesheet" href="sencha/sencha-touch.css">
<link rel="stylesheet" href="css/screen.css">
<script type="text/javascript" src="sencha/sencha-touch.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>

<textarea id="sample-table-template" class="x-hidden-display">
<table id="sample-table">
<tr>
<tpl for=".">
<tr>
<tpl for="subelems">
<td>{test}</td>
</tpl>
</tr>
</tpl>
</tr>
</table>
</textarea>

</body>
</html>


and the contents of index.js are


Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function(){
var rootPanel;
var log;

var pinchStartWidth;
var pinchStartHeight;
var dragStartXPos;
var dragStartYPos;
var isPinching;
var isDragging;

function getContent(){
content = Ext.get("sample-table");
content.setStyle("position", "absolute");
return content;
}


var testPanel = Ext.extend(Ext.Panel, {
tpl: Ext.XTemplate.from('sample-table-template'),
listeners: {
el: {
pinchstart: function(e){
if(isDragging){
return;
}
var content = getContent();
var size = content.getSize();

pinchStartWidth = size.width;
pinchStartHeight = size.height;
isPinching = true;
},
pinchend: function(e){
isPinching = false;
},
pinch: function(e){
alert("PINCH");
if(isDragging){
return;
}

var content = getContent();
content.setStyle("position", "absolute");

var size = content.getSize();
var factor = 80;
if(e.deltaScale < 0){
factor *= 5;
}

if(!pinchStartWidth){
pinchStartWidth = size.width;
}
if(!pinchStartHeight){
pinchStartHeight = size.height;
}

var newWidth= pinchStartWidth + (factor * e.deltaScale);
var newHeight= pinchStartHeight + (factor * e.deltaScale);

content.setSize(newWidth, newHeight);

var oldLeft = content.getLeft();

content.setLeft( content.getLeft() - ((newWidth - size.width) / 2) );
content.setTop( content.getTop() - ((newHeight - size.height) / 2) );
},

drag: function(e){
if(isPinching){
return;
}

var content = getContent();
if(!dragStartXPos){
dragStartXPos = content.getLeft();
}
if(!dragStartYPos){
dragStartYPos = content.getTop();
}

var newLeft = dragStartXPos + e.deltaX;
var newTop = dragStartYPos + e.deltaY;

if(newLeft > 0){
newLeft = 0;
}
if(newTop > 0){
newTop = 0;
}

content.setLeft( newLeft );
content.setTop( newTop );
},
dragstart: function(e){
if(isPinching){
return;
}
var content = getContent();
dragStartXPos = content.getLeft();
dragStartYPos = content.getTop();
isDragging = true;
},
dragend: function(e){
isDragging = false;
},
}
}
});

var testPanelInstance = new testPanel();
var tableObject = [];

for(var x = 0; x < 20; x++){
var subelems = {'subelems': []};
for(var y = 0; y < 20; y++){
subelems['subelems'].push({test: x + "x" + y});
}
tableObject.push(subelems);
}

testPanelInstance.update(tableObject);

rootPanel = new Ext.Panel({
layout: "card",
fullscreen: true,
items: [testPanelInstance]
});
}
});


thanks for any help!