So I have tried to implement Post #1 into a Sencha Archtiect project, following is my generated code. I can fire a msgbox on Pinch and Double click but the image does not do anything.
app.html
Code:
<!DOCTYPE html>
<!-- Auto Generated with Sencha Architect -->
<!-- Modifications to this file will be overwritten. -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>pincher</title>
<script src="http://extjs.cachefly.net/touch/sencha-touch-2.1.0/sencha-touch-all-debug.js"></script>
<link rel="stylesheet" href="http://extjs.cachefly.net/touch/sencha-touch-2.1.0/resources/css/sencha-touch.css">
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript">
if (!Ext.browser.is.WebKit) {
alert("The current browser is unsupported.\n\nSupported browsers:\n" +
"Google Chrome\n" +
"Apple Safari\n" +
"Mobile Safari (iOS)\n" +
"Android Browser\n" +
"BlackBerry Browser"
);
}
</script>
</head>
<body></body>
</html>
app.js
Code:
*
* File: app.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Sencha Touch 2.1.x library, under independent license.
* License of Sencha Architect does not include license for Sencha Touch 2.1.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
views: [
'PinchZoomImage',
'container'
],
name: 'MyApp',
launch: function() {
Ext.create('MyApp.view.container', {fullscreen: true});
}
});
/app/view/MyView.js
Code:
/*
* File: app/view/MyImage.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Sencha Touch 2.1.x library, under independent license.
* License of Sencha Architect does not include license for Sencha Touch 2.1.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('MyApp.view.MyImage', {
extend: 'Ext.Panel',
requires: [
'MyApp.view.PinchZoomImage'
],
config: {
fullscreen: false,
layout: {
type: 'hbox'
},
items: [
{
xtype: 'pinchzoomimage',
flex: 1,
src: 'http://upload.wikimedia.org/wikipedia/commons/5/5f/Super_Guppy_N941_NASA_landing.jpg'
}
]
}
});
/app/view/PinchZoomImage.js
Code:
/*
* File: app/view/PinchZoomImage.js
*
* This file was generated by Sencha Architect version 2.1.0.
* http://www.sencha.com/products/architect/
*
* This file requires use of the Sencha Touch 2.1.x library, under independent license.
* License of Sencha Architect does not include license for Sencha Touch 2.1.x. For more
* details see http://www.sencha.com/license or contact license@sencha.com.
*
* This file will be auto-generated each and everytime you save your project.
*
* Do NOT hand edit this file.
*/
Ext.define('MyApp.view.PinchZoomImage', {
extend: 'Ext.Container',
alias: 'widget.pinchzoomimage',
config: {
src: '',
height: 'n',
width: 'n',
scrollable: true
},
initImage: function(newImageSrc) {
var height = this.getHeight() || this.element.getHeight(),
width = this.getWidth() || this.element.getWidth(),
src = this.getSrc() || newImageSrc,
image = null;
if (Ext.isString(src) && src !== '') {
image = Ext.create('Ext.Img', {
// set mode auf empty to create a real image tag
mode: '',
height: height,
width: width,
src: src,
listeners: {
pinch: {
element: 'element',
fn: this.onImagePinch
},
doubletap: {
element: 'element',
fn: this.onImageDoubletap
}
}
});
this.add(image);
}
console.log('initImage');
},
onImagePinch: function(e) {
var initialWidth = this.getInitialConfig('width'),
initialHeight = this.getInitialConfig('height'),
newWidth = initialWidth * e.scale,
newHeight = initialHeight * e.scale,
container = this,
image = this.element,
scroller = this.up('container').getScrollable().getScroller(),
pos = scroller.getMaxPosition();
container.setWidth(newWidth);
container.setHeight(newHeight);
image.setWidth(newWidth);
image.setHeight(newHeight);
scroller.scrollTo(pos.x/2, pos.y/2);
},
onImageDoubletap: function(e) {
var initialWidth = this.getInitialConfig('width'),
initialHeight = this.getInitialConfig('height'),
container = this,
image = this.element;
container.setWidth(initialWidth);
container.setHeight(initialHeight);
image.setWidth(initialWidth);
image.setHeight(initialHeight);
Ext.Msg.alert('DoubleTap');
},
applySrc: function(newImageSrc) {
var oldImage = this.down('img');
if (Ext.isObject(oldImage)) {
oldImage.destroy();
}
this.initImage(newImageSrc);
console.log('applySrc');
}
});
Reply With Quote