引き続きSencha Touch2、今回は本題であるイベント周りを記述する。
前回使っていたevent 01だと3ページ分のスクリプトが入り交じっていて少しゴチャッとしているので、各ページごとに3つに分けて説明をしていくことにする。
またしても長くなったので、もう1エントリ続ける。

[event 01a]
これはKitchen Sink ExampleのTouch Eventからソースを引っ張ってきて変更をしている。
画面を適当にタップやドラッグすると、オーバレイの窓にタップイベントが表示され、
前回のようにインスペクタを出しConsoleをみるとログが表示されている。
http://hvn.to/sencha/senchaTests/hello/apps/event01a.js
がjsのソースであり、重要になってくるのは、15行目以下あたりからになる。
これは先のTouch Eventからこの部分を抜き出し

var eventDispatcher = this.getEventDispatcher();

eventDispatcher.addListener('element', '#touchpad', '*', function(a, b, c, d) {
  var name = d.info.eventName;

  if(!name.match("mouse") && !name.match("click")) {
    var logger = Ext.getCmp('logger'), scroller = logger.getScrollable().getScroller();

      logger.innerHtmlElement.createChild({
        html : d.info.eventName
      });

      setTimeout(function() {
        scroller.scrollTo(0, scroller.getSize().y - scroller.getContainerSize().y);
	}, 50);
      }
  });
},

下記のように変更している。

var eventDispatcher = this.getEventDispatcher();
eventDispatcher.addListener('element', '#tabP', '*', function(a,b,c,d) {
　　var name = d.info.eventName;
　　if (!name.match("mouse") && !name.match("click")) {
				
　　　　console.log('tabP mouse event-----------------');
				
　　　　//console.log(d.info.eventName);
　　　　console.log(a);
　　　　//console.log(a.pageX);
　　　　//console.log(a.pageY);
　　　　console.log(b);
　　　　console.log(c);
　　　　console.log(d);
				
　　　　var logger = Ext.getCmp('logger'),
　　　　scroller = logger.getScrollable().getScroller();
						
　　　　logger.updateHtml(d.info.eventName);
　　}
})

getEventDispatcherはドキュメントに載っていないものではあるが、ソースコード（src/mixin/Observable.js）でなんとなくイベントリスナーのインスタンス関連であることくらいは分かった。addListenerもドキュメントにあるもの
addListener( String eventName, Function fn, [Object scope], [Object options] )
と微妙に違っていて非常に悩ましい。この部分についてはまたどこかで解明できたら報告するつもりだ。
きっと’#touchpad’と書かれている部分で、タッチする部分のid指定だと推察し、変更して動かせるようにした。
それ以上に分からないのがfunction(a,b,c,d)の部分だった。ということでこの部分をconsole.log(a);といったように直接入れてオブジェクトダンプしてみる。
するとa・dはクラスから作られたオブジェクト、bはHTML要素、cはオブジェクト（空のようだ、きっとオプションオブジェクト）となっている。
a・dについて、__proto__部分を開くと元になったクラスが確認できる。aではExt.event.Touch、dではExt.event.Controllerが元になっている。
そして、aにはpageX、pageYとしてタップイベントの起きた位置、dではinfo内にターゲットやサンプルでも使われているイベント名などの情報がはいっており、なにかと重宝しそうな感じだ。

新しくhtml要素を作るのではなく書き換えたいのだが、やっぱりドキュメントにない。そこでinnerHtmlElementが定義されているクラスにはきっと書き換えもあるだろうと確認してみる。innerHtmlElementの定義されているjsはsrc/Component.jsだ、これを見るとそれっぽい名前のupdateHtmlが存在しており、これを使用するとうまく動いてくれた。他にもupdateCls等々ドキュメントに載っていないが使えそうな関数が色々とあった。

このままevent 01b,event 01cも続けて書くと長くなるので、今回はココまでにして、また次回に続けることにする。