Ext.Windowのbackspace押下時の制御について

[silkyblack]

Ext.Windowを使用したモーダル画面を作成しています。
システム仕様により、Backspace押下による前画面表示（history.back)が起こらないよう、
keycode=8（Backspace）に対してイベントをストップするようにしておりますが、
Ext.Windowで作成したモーダルにTAB移動した場合のみ、history.backが発生してしまいます。
何とかhistory.backが発生しないよう制御したいのですが、良い方法がございましたらご教授下さい。
※現象が再現できるサンプルを添付いたしました。
以下、発生環境・手順になります。
◆環境
ブラウザ：IE 6.02
◆手順
①添付の３ファイルをext\examples\window以下に配置する。
②IE6を開き、事前に何らかのページを表示して、historyを作っておく。
③添付のsample.htmlをIE6で表示
④iframe内の「Hello World」ボタンを押下し、 Ext.windowモーダル画面を表示
⑤Tabキーを押し続け、モーダルのiframe部分にフォーカスしていると思われるところでBackspaceキーを押下。
⑥親画面がhistory.backしてしまう。
　※モーダル内項目の「Hello　World1」・「Hello　World2」にフォーカスが当たってる際は、
　　　Backspaceキーの制御が出来ていますので、history.backは発生しません。
よろしくお願いします。

[Kazuhiro Kotsutsumi]

えー・・・・っと、突っ込みどころが満載だったんですが・・・一つずつ・・・。

まず、ウィンドウは表示されませんでした。
表示するJSコードも見あたりませんでした。

んで、あと、ブラウザ判定は、Extオブジェクト使った方がいいですよ。

あと、処理はExt.onReadyから書きましょう。

で、やりたいことをくみ取って作ってみました。
extjsディレクトリには、Ext JSを解凍したものを配置してください。

Ext.KeyMapを使って、Bodyに対してキーイベントハンドラを設定しています。
BACKSPACEが押されたときに、イベントストップさせているだけです。

一応、iFrameにしたので、外側にも同じコードを配置しておきます。
これで、iFrameの外側（index.html）も、中(sample.html)もBACKSPACEがきかない様になっています。

たぶん、これで求めていることが実現できるとおもうんですが、いかがでしょうか。

IE6/FF3 で動作確認しました。

[yuki]

二重投稿でしたので被っている投稿を削除してスレッドを一カ所にマージしておきました。

あと、サンプルコードを添付するときには、検証する人の手間ができるだけかからないように、Cachefly等を利用してください（Cacheflyの使い方はこちらをご参照 (http://extjs.com/forum/showthread.php?t=61503)ください）。その方が回答してもらえる確率があがると思います:)

Cacheflyは/examples下のソースも利用できますよ。

[yuki]

⑤Tabキーを押し続け、モーダルのiframe部分にフォーカスしていると思われるところでBackspaceキーを押下。
⑥親画面がhistory.backしてしまう。


「モーダルのiframe部分」というのが何を指すのかわからなかったのですが（iframe内のモーダルウィンドウ？）、再現できませんでした。親フレームをマウスでクリックしたあとにBackspaceを押すと戻るのですが、それ以外のところにTab移動しても戻りませんでした。。。

[silkyblack]

わかりにくい説明＆サンプルで申し訳ございませんでした。
ご教授いただきましたように、Cachefｌｙを利用したサンプルを作成しました。
添付のzipを解凍し、直接sample.htmlを実行してください。

また、「モーダルのiframe部分」に関する件と、現象発生手順の説明資料を作成しましたので、
添付zip内の「BackSpace押下時の説明資料.xls」をご参照下さい。

よろしくお願いいたします。

[yuki]

Ext.Windowのようなfloating=trueなPanelについては、IE6（とMac版のFF2）では、Shimと呼ばれるIframeが自動的に挿入されます（z-Index問題の解決のため）。

今回の問題はタブ移動でこのShimにフォーカスが移ってしまうため起きているみたいです。
で、あまりスマートなコードではないので、誰かに添削してもらいたいのですが、とりあえず下記のようにしたらなんとか現象は解決しました：

if(Ext.isIE6){ // IE6だったら
win.on('show', function(){ // winはExt.Windowオブジェクト（hello.js内）
var ifr = Ext.select('.ext-shim').item(0).dom.contentWindow;
ifr.document.onkeydown = function(e){
if(ifr.event.keyCode==8) return false;
};
});
}

上記青字の行で、Shim（ext-shimクラスを持つ）を取得してその中のwindowオブジェクト（contentWindow）を取得し、その中のdocumentにイベントハンドラーを定義しています。

また、イベントはifr内で起きているので、これを拾うためには赤字のようにifr.eventとしてあげないとエラーが起きてしまいます。

いかがでしょうか？:-?

[silkyblack]

ご回答、ありがとうございます。
早速こちらの環境に組み込み、history.backが発生しないことを確認しました。
IE６の場合の特殊な仕様だったのですね。
z-Index問題は、Mask時など、色々と苦労しています:((

本件、わかりやすいご説明、ありがとうございました。
またよろしくお願いします。