ozero/gist:1002303

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="resources/css-debug/sencha-touch.css" type="text/css" />
  <script type="text/javascript" src="resources/sencha-touch-debug.js"></script>
  <script>

//global vals
zoomCur = 1;
zoomInit = 1;
lenInit = 0;
hogeloop = 0;

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


//Panelを手前勝手に拡張してつくるよー
var TouchImpl = Ext.extend(Ext.Panel, {
	fullscreen:true,
	//コンストラクタっすかね。
	initComponent : function() {
		//デモ画面のタッチイベントログ表示領域
		this.logger = new Ext.Panel({
			id: 'logger',
			scroll: 'vertical',
			styleHtmlContent: true,
			html: '<span>↑んとこでマルチタッチなりくぱぁなりしてみ。ここにイベントログ流れっけぇ。</span>'
		});
		//なにこれ。
		/*this.info = new Ext.Component({
			xtype: 'component',
			styleHtmlContent: true,
			scroll: 'vertical',
			html: '<p>はっかせーだにゃん　はっかせーだにゃん</p>'
		});*/
		//デモ画面のタッチパッド領域
		this.touchPad = new TouchImpl.TouchPad({
			listeners: {
				log: this.onLog,
				scope: this
			}
		});
		//このプロジェクトの画面基本設定
		this.layout = 'card';
		this.logger.flex = 1;
		this.touchPad.flex = 1;
		//デモ画面のレイアウト
		this.touchCard = new Ext.Container({
				layout: {
					type: 'vbox',
					align: 'stretch'
				},
				items: [this.touchPad, this.logger]
		});
		//トップ画面カードとデモ画面カードの2枚を初期画面として表示
		this.items = [this.touchCard];
		TouchImpl.superclass.initComponent.call(this);
	},

	//ログ出力
	onLog : function(type, e) {
		//console.log(e);
		var loggerEl = this.logger.body;
		if (!this.started) {
			loggerEl.select('span').remove();
			this.started = true;
		}

		switch (type) {
			default:
				loggerEl.first().insertFirst({
					tag: 'p',
					html: type,
					style: 'margin: 0'
				});
				loggerEl.select('p:nth-child(50)').remove();
			break;
		}
	}
});


//デモ画面のタッチパッドに使うコンポーネントの定義
TouchImpl.TouchPad = Ext.extend(Ext.Component, {
	id: 'touchpad',
	//html: 'Touch here!',
	contentEl: 'content1',

	initComponent : function() {
		this.addEvents('log');
		TouchImpl.TouchPad.superclass.initComponent.call(this);
	},
  //描画後
	afterRender: function() {
	  //extend元の同メソッドをおもむろに実行しといてから
		TouchImpl.TouchPad.superclass.afterRender.call(this);
		//
		this.mon(this.el, {
			touchstart: this.handleEvent,
			touchend: this.handleEvent,
			touchmove: this.handleEvent,
			touchdown: this.handleEvent,
			dragstart: this.handleEvent,
			drag: this.handleEvent,
			dragend: this.handleEvent,
			singletap: this.handleEvent,
			tap: this.handleEvent,
			doubletap: this.handleEvent,
			taphold: this.handleEvent,
			tapcancel: this.handleEvent,
			swipe: this.handleEvent,
			pinch: this.handleEvent,
			pinchstart: this.handleEvent,
			pinchend: this.handleEvent,
			scope: this
		});
	},
  //タッチ時イベントのハンドラ
	handleEvent: function(e) {
		//マルチタッチズームに使うマルチタッチ開始時の2点間距離
		var lenCur = 0;
		//ズーム率の値域制限
		if(zoomCur > 100){
			zoomCur = 100;
		}
		if(zoomCur < 0.005){
			zoomCur = 0.005;
		}
		//なんか
		var logstr = "";
		var el=Ext.get('unkounko');

		//マルチタッチなら
		if(e.touches[1] != null){
			//距離を出す
			lenCur = Math.round(Math.sqrt(
				(e.touches[1]['pageX'] - e.touches[0]['pageX'])
				*(e.touches[1]['pageX'] - e.touches[0]['pageX'])
				+(e.touches[1]['pageY'] - e.touches[0]['pageY'])
				*(e.touches[1]['pageY'] - e.touches[0]['pageY']))
			);
			//
			if( (e.type == 'pinchstart')
				||(e.type == 'touchstart')
				||(e.type == 'dragstart')){
				//なんやら開始、系のイベントならば
				lenInit = lenCur;//グローバルに持たせた距離初期値に現在の距離を放り込む
				zoomInit = zoomCur;//前回までのイベントループ内で出た最終値をグローバルに持たせたInitに積んでおく
				//ログでも吐いとく
				logstr = "zoom[I/C]:[" + zoomInit +"/"+ zoomCur
					+"], len[I/C]:" + lenInit +"/"+ lenCur + "]";
				this.fireEvent('log', logstr, e);

			}else{
				//でなければ
				//今回のイベントループ時点での倍率を積む
				//いろいろ加算した結果の現在のズーム率
				zoomCur = zoomInit * lenCur / lenInit;
			}
			//ログでも吐いとく
			logstr = hogeloop + ": " + Math.round(zoomCur*100)
				+"%, len[I/C]:[" + lenInit +"/"+ lenCur+"]";
			this.fireEvent('log', logstr + " - " + e.type, e);

			//el.dom.value = Math.round(zoomCur*100);
			hogeloop++;
		}
		//console.log(el);
	}
});

//以上のなにがしを動かすがよい
new TouchImpl();

	}
});

</script>
<style>
/* コンテンツ表示欄独自スタイル */
body{
	background-color: #eee;
}
.container{
	background-color: #ddd;
}
.aa{
  overflow:hidden;
}
</style>
</head>

<body>
<div style="display:none;">
	<div id="content1">
<p id="unkounko">うんこ</div>
</div>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<link rel="stylesheet" href="resources/css-debug/sencha-touch.css" type="text/css" />
	<script type="text/javascript" src="resources/sencha-touch-debug.js"></script>
	<script>

	//global vals
	zoomCur = 1;
	zoomInit = 1;
	lenInit = 0;
	hogeloop = 0;

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



	//Panelを手前勝手に拡張してつくるよー
	var TouchImpl = Ext.extend(Ext.Panel, {
	fullscreen:true,
	//コンストラクタっすかね。
	initComponent : function() {
	//デモ画面のタッチイベントログ表示領域
	this.logger = new Ext.Panel({
	id: 'logger',
	scroll: 'vertical',
	styleHtmlContent: true,
	html: '<span>↑んとこでマルチタッチなりくぱぁなりしてみ。ここにイベントログ流れっけぇ。</span>'
	});
	//なにこれ。
	/*this.info = new Ext.Component({
	xtype: 'component',
	styleHtmlContent: true,
	scroll: 'vertical',
	html: '<p>はっかせーだにゃん　はっかせーだにゃん</p>'
	});*/
	//デモ画面のタッチパッド領域
	this.touchPad = new TouchImpl.TouchPad({
	listeners: {
	log: this.onLog,
	scope: this
	}
	});
	//このプロジェクトの画面基本設定
	this.layout = 'card';
	this.logger.flex = 1;
	this.touchPad.flex = 1;
	//デモ画面のレイアウト
	this.touchCard = new Ext.Container({
	layout: {
	type: 'vbox',
	align: 'stretch'
	},
	items: [this.touchPad, this.logger]
	});
	//トップ画面カードとデモ画面カードの2枚を初期画面として表示
	this.items = [this.touchCard];
	TouchImpl.superclass.initComponent.call(this);
	},

	//ログ出力
	onLog : function(type, e) {
	//console.log(e);
	var loggerEl = this.logger.body;
	if (!this.started) {
	loggerEl.select('span').remove();
	this.started = true;
	}

	switch (type) {
	default:
	loggerEl.first().insertFirst({
	tag: 'p',
	html: type,
	style: 'margin: 0'
	});
	loggerEl.select('p:nth-child(50)').remove();
	break;
	}
	}
	});




	//デモ画面のタッチパッドに使うコンポーネントの定義
	TouchImpl.TouchPad = Ext.extend(Ext.Component, {
	id: 'touchpad',
	//html: 'Touch here!',
	contentEl: 'content1',

	initComponent : function() {
	this.addEvents('log');
	TouchImpl.TouchPad.superclass.initComponent.call(this);
	},
	//描画後
	afterRender: function() {
	//extend元の同メソッドをおもむろに実行しといてから
	TouchImpl.TouchPad.superclass.afterRender.call(this);
	//
	this.mon(this.el, {
	touchstart: this.handleEvent,
	touchend: this.handleEvent,
	touchmove: this.handleEvent,
	touchdown: this.handleEvent,
	dragstart: this.handleEvent,
	drag: this.handleEvent,
	dragend: this.handleEvent,
	singletap: this.handleEvent,
	tap: this.handleEvent,
	doubletap: this.handleEvent,
	taphold: this.handleEvent,
	tapcancel: this.handleEvent,
	swipe: this.handleEvent,
	pinch: this.handleEvent,
	pinchstart: this.handleEvent,
	pinchend: this.handleEvent,
	scope: this
	});
	},
	//タッチ時イベントのハンドラ
	handleEvent: function(e) {
	//マルチタッチズームに使うマルチタッチ開始時の2点間距離
	var lenCur = 0;
	//ズーム率の値域制限
	if(zoomCur > 100){
	zoomCur = 100;
	}
	if(zoomCur < 0.005){
	zoomCur = 0.005;
	}
	//なんか
	var logstr = "";
	var el=Ext.get('unkounko');

	//マルチタッチなら
	if(e.touches[1] != null){
	//距離を出す
	lenCur = Math.round(Math.sqrt(
	(e.touches[1]['pageX'] - e.touches[0]['pageX'])
	*(e.touches[1]['pageX'] - e.touches[0]['pageX'])
	+(e.touches[1]['pageY'] - e.touches[0]['pageY'])
	*(e.touches[1]['pageY'] - e.touches[0]['pageY']))
	);
	//
	if( (e.type == 'pinchstart')
	\|\|(e.type == 'touchstart')
	\|\|(e.type == 'dragstart')){
	//なんやら開始、系のイベントならば
	lenInit = lenCur;//グローバルに持たせた距離初期値に現在の距離を放り込む
	zoomInit = zoomCur;//前回までのイベントループ内で出た最終値をグローバルに持たせたInitに積んでおく
	//ログでも吐いとく
	logstr = "zoom[I/C]:[" + zoomInit +"/"+ zoomCur
	+"], len[I/C]:" + lenInit +"/"+ lenCur + "]";
	this.fireEvent('log', logstr, e);

	}else{
	//でなければ
	//今回のイベントループ時点での倍率を積む
	//いろいろ加算した結果の現在のズーム率
	zoomCur = zoomInit * lenCur / lenInit;
	}
	//ログでも吐いとく
	logstr = hogeloop + ": " + Math.round(zoomCur*100)
	+"%, len[I/C]:[" + lenInit +"/"+ lenCur+"]";
	this.fireEvent('log', logstr + " - " + e.type, e);

	//el.dom.value = Math.round(zoomCur*100);
	hogeloop++;
	}
	//console.log(el);
	}
	});

	//以上のなにがしを動かすがよい
	new TouchImpl();

	}
	});

	</script>
	<style>
	/* コンテンツ表示欄独自スタイル */
	body{
	background-color: #eee;
	}
	.container{
	background-color: #ddd;
	}
	.aa{
	overflow:hidden;
	}
	</style>
	</head>

	<body>
	<div style="display:none;">
	<div id="content1">
	<p id="unkounko">うんこ</div>
	</div>
	</body>
	</html>