Ext.MessageBox のTab移動について

[Mari]

たびたびお世話になります。

現在、Ext.Msg.showで、メッセージダイアログを表示しています。

ボタンが、「はい」「いいえ」の２つあった際、Tabキーを押していくと、フォーカスは、
　「はい」　→　「いいえ」　→　メインのフレーム項目へ移動
という順で、後ろのメインウィンドウへ移動してしまいます。

通常のブラウザのダイアログのように、
　「はい」　→　「いいえ」　→　「はい」　→　「いいえ」・・・
と、ダイアログ内のボタンだけでフォーカスを循環移動させる方法はありますでしょうか？

[Kazuhiro Kotsutsumi]

ゼノフィ、小堤です。

完璧なものではありませんが、下記のようにすることでできます。
Ext.Msg.Showの前に実行すればOKです。


var btnNo, btnYes;
Ext.each( Ext.Msg.getDialog().buttons, function(btn){
if( btn.text === Ext.MessageBox.buttonText.no ) {
btnNo = btn;
}
if( btn.text === Ext.MessageBox.buttonText.yes ) {
btnYes = btn;
}
});
Ext.select('.x-btn-text',true,btnNo.el.dom).each(function(el){
el.on('blur',function(){
Ext.Msg.getDialog().focus();
});
});

Ext.Msg.show({
title:'保存しますか?',
msg: '文章が変更されています。保存して終了しますか？',
buttons: Ext.Msg.YESNO,
icon: Ext.MessageBox.QUESTION
});

Shift+TABには対応していないため、「はい」で、Shift+TABを押すと「いいえ」にフォーカスするわけではありません。

業務などの要望で仕方がない場合もありますが、TABによるフォーカスはHTMLエレメント以外にも移動するものですので、できる限り変更しないほうがよいと思います。

例えば、上記のようにShift+TAB自体は判定できないので、blurだと進んだのか、Shift+TABで戻ったのか判別できません。

ご参考になれば。

[Mari]

大変参考になりました。
ありがとうございました。

こちらで少々拡張し、Shift+TABにも対応することができました。


var btnNo,btnYes,btnOk;
var dialogObj;
Ext.each(Ext.Msg.getDialog().buttons, function(btn){
if(btn.text === Ext.MessageBox.buttonText.no){
btnNo = btn;
}
if(btn.text === Ext.MessageBox.buttonText.yes){
btnYes = btn;
}
});
Ext.select('.x-btn-text',true,btnNo.el.dom).each(function(el){
el.on('keydown',function(e){
if(e.keyCode == 9){
if(!dialogObj){
dialogObj = Ext.Msg.getDialog();
}
dialogObj.focusEl = btnYes;
dialogObj.focus();
}
});
});
Ext.select('.x-btn-text',true,btnYes.el.dom).each(function(el){
el.on('keydown',function(e){
if(e.shiftKey && e.keyCode == 9){
if(!dialogObj){
dialogObj = Ext.Msg.getDialog();
}
dialogObj.focusEl = btnNo;
dialogObj.focus();
}
});
});

今後ともよろしくお願いいたします。

[Kazuhiro Kotsutsumi]

参考になったみたいで、よかったです。:)

ただ、これもうおわかりになっていると思いますが、シングルトンのExt.Messageオブジェクトに直接設定しているので、全部に対して適用されてしまいます。

たぶん・・・全部いいんじゃないのか。とは思うのですが、一応。

メッセージボックスは、ただのウィンドウっぽいですが、実際は内部でExt.Windowを生成してgetDialogでコンポーネントインスタンスを取得できるようになっているため、拡張はしにくいですよね。

継承していじりやすいUXそのうち作るかなぁ。

では。

[Mari]

こちらの工程がすでに終盤ということもあり、Ext.Msg.showを記述している箇所が既に数百ヶ所あるため、
むしろ全部に適用される動作で助かりました。
共通で読み込むjs内で読み込むよう、適用しました。

＞継承していじりやすいUXそのうち作るかなぁ。
ぜひよろしくおねがいします。
お待ちしています♪

本件、ご回答ありがとうございました。