DOMに対してい任意イベントを発生させる（タッチディバイスの場合）

タッチディバイスの場合、GoogleMapAPIで地図を表示している部分では、MouseEventのclickではイベントをキャッチしてもらえないようだったので、専用にタッチイベントを起こしてみた。

TouchEventはDOMでは規定されていないので、プラットフォーム別に初期化の仕方が違うみたいなので、とりあえず手持ちで確認できたAndroidとiOSむけだけ。
PC向けのブラウザでは動かない。


イベントとしては
touchstart
touchmove
touchend
の３つがあるみたい。
タッチディバイスによっては、マルチタッチをサポートしているものがあるので、タッチイベントは配列で指定することになる。

GoogleMapAPIで地図のクリックイベントとして登録した処理は、はtouchstartだけでは実行してくれなかったので、touchstartの後にすぐにtouchendを発行してみたらちゃんと処理された。


-------ここから-------
var evt=document.createEvent('TouchEvent');
var event2=document.createEvent('TouchEvent');
var touch = document.createTouch(window,elements, 0, x, y, x, y);
var touches = document.createTouchList(touch);
                   
[Androidの場合]

evt.initTouchEvent(touches, touches, touches, 'touchstart', window, x,y, x, y, false, false, false, false);
event2.initTouchEvent(touches, touches, touches, 'touchend', window, x,y, x, y, false, false, false, false);

[iOSの場合]
 evt.initTouchEvent('touchstart', true, true, window, 0, x,y,x, y, false, false, false, false, touches, touches, touches,1, 0);
 event2.initTouchEvent('touchend', true, true, window, 0, x,y,x, y, false, false, false, false, touches, touches, touches,1, 0);


elements.dispatchEvent( evt );
elements.dispatchEvent( event2 );
-------ここまで-------

DOMに対してい任意イベントを発生させる

DOM内の要素に対してイベントを任意に発生させることができることが分かったので、とりあえずメモ。

このあたりが参考になる。

createEvent()を使って、イベントをオブジェクトを作り、必要なパラメータを設定する。
createEvent()の引数はイベントの修理

以下は、Mouseでのクリックイベントを発生発生させているところ。

var evt = document.createEvent( "MouseEvents" );
evt.initMouseEvent("click", true, true, window, 0, 0,0, 250, 250,  false, false, false, false, 0, null);

dispacthEvent()を使って他のDOM要素に対してイベントを割り振ることができる。


スマートフォンやタブレットの場合だと、clickイベントだとうまく動かない。
Touch系のイベントを指定しなくちゃいけないんだけど、DomLevel2では規定されいなので、どうするか・・・。
あとで調べる予定。

HTML上任意座標のdomエレメントを取得する

elementFromPoint()を使うと任意座標上に表示されている、要素を取得できることがわかったので、とりあえずメモ

el=document.elementFromPoint( x , y );


末端のDOM要素が取得できるみたい。

Ext.grid.Panelで縦スクロールを制御

Ext.grid.Panelで縦スクロールを制御のした方を調べたので、とりあえずメモ。

方法としては２つ あるみたい。


a) Ext.core.ElementのscrollIntoView()を利用

 Ext.Element(grid.getView().getNode(インデックス)).scrollIntoView();

b)Ext.grid.ViewのfocusRow()を利用
 grid.getView().focusRow(インデックス);



b)の方は、すでに画面のどこかに表示している場合は、とくに変化がないので、任意行をGridの一番上に持ってきたい場合は、一度最終行を表示させた後で、表示したい行を指定するといいかも。


Gridの初期表示時に任意行を先頭に表示させる場合は、gridパネルのlistenersのイベントを登録して、その中で、上記の指定をすればよさそう。

色々と試したけど、afterlayoutイベントではうまく行った。
ただgridパネルを最初に表示させる際に、２度afterlayoutイベントがコールされてる動きをしていたので、工夫が必要かも。
a)で処理させようとすると、動作上は動いているように見えるけど、なぜか２回目のところで、エラーになってしまう。