meyerovb
30 Jul 2010, 5:44 PM
Disabling the draggable only detaches the tapEvent, not the touchmove or touchend events. In the below example, you can drag the box, clicking Broken disables the drag but you still cannot pinch resize the box. Click Works and the drag is correctly disabled and you can pinch-resize the box.
<html>
<head>
<title></title>
<link href="/css/ext-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/sencha/ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({ onReady: function () {
Ext.fly('panel').on({
scope: { scale: 1 },
pinchstart: function () { this.startScale = this.scale; },
pinch: function (e, t) {
this.scale = e.scale * this.startScale;
t.style.webkitTransform = 'scale(' + this.scale + ')';
}
});
window.drag = new Ext.util.Draggable('panel');
}
});
function disableDrag() {
drag.el.un('touchmove', drag.onTouchMove, drag);
drag.el.un('touchend', drag.onTouchEnd, drag);
}
</script>
</head>
<body>
<div id="panel" style="background-color: #ddd; width: 200px; height: 200px;
position: absolute; left: 100px;">
</div>
<a href="javascript:drag.disable();">Broken</a><br /><br />
<a href="javascript:disableDrag();">Works</a>
</body>
</html>
<html>
<head>
<title></title>
<link href="/css/ext-touch.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/js/sencha/ext-touch-debug.js"></script>
<script type="text/javascript">
Ext.setup({ onReady: function () {
Ext.fly('panel').on({
scope: { scale: 1 },
pinchstart: function () { this.startScale = this.scale; },
pinch: function (e, t) {
this.scale = e.scale * this.startScale;
t.style.webkitTransform = 'scale(' + this.scale + ')';
}
});
window.drag = new Ext.util.Draggable('panel');
}
});
function disableDrag() {
drag.el.un('touchmove', drag.onTouchMove, drag);
drag.el.un('touchend', drag.onTouchEnd, drag);
}
</script>
</head>
<body>
<div id="panel" style="background-color: #ddd; width: 200px; height: 200px;
position: absolute; left: 100px;">
</div>
<a href="javascript:drag.disable();">Broken</a><br /><br />
<a href="javascript:disableDrag();">Works</a>
</body>
</html>