アプローチI.event.preventDefault()
キープレス/キーアップイベントハンドラーで実行しないでください。ブラウザーがデフォルトのアクション、つまりタブナビゲーションを実行するのをブロックしないようにします。この例は機能します:
Ext.create('Ext.form.Panel', {
title: 'Contact Info',
width: 300,
renderTo: Ext.getBody(),
items: [{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Name',
listeners: {
specialkey: function(me, e) {
if (e.getKey() == e.TAB) {
console.log('Tab key pressed!');
// do whatever you want here just don't do e.preventDefault() or e.stopEvent() if you want the browser tab to next control
}
}
}
}, {
xtype: 'textfield',
name: 'email',
fieldLabel: 'Email Address',
}]
});
Ext 4で試しましたが、Ext 2以降、すべての重要なメソッドが利用できるはずです。それでも問題が発生する場合は、コードの一部を共有してください。
邪魔にならないようにして、ブラウザにネイティブに処理させることは、通常、最良かつ最も堅牢なソリューションです...
アプローチII。複数の要素を持つ複雑なコンポーネントがある場合でも、 CSS( KeyNav / KeyMap )を使用してポップアップ要素内のフォーカスアイテムをシミュレートしながら、メインの入力要素(通常はテキストフィールド)にフォーカスを強制することで、アプローチIのケースを実現できます。ここでは、メインの入力要素で便利です)。基本的に、ユーザーがポップアップにフォーカスを設定し(クリックするなど)、フォーカスをメイン要素にスナップバックする可能性があるすべてのケースをキャッチします。
これにより、一部がコンポーネントでない場合でも、html要素の自然なタブ順序が保証されます。それが最善の方法であり、ほとんどの場合達成するのに苦労する価値があると私は信じています。
これが、 ComboBoxやDatePickerなどのコンポーネントの動作方法です(後者は、値が更新された後、常にメイン要素にフォーカスを設定します。ComboBoxのフォーカスロジックはもう少し複雑です。ソースコードのリンクを見てください。コンポーネントに実装する方法について混乱している場合は、非常に洞察力があります。
アプローチIII。最後の手段。それでもプログラムで別の(隣接する)フィールドに焦点を合わせる必要がある場合は、比較的簡単です。Ext 2.3のコード(テストはしていませんが、ドキュメントを使用していました):
var formPanel, // containing form panel
currentField, // the field you need to navigate away from
fields,
currentFieldIdx,
nextField;
fields = formPanel.getForm().items;
currentFieldIdx = fields.indexOf(currentField);
if(currentFieldIdx > -1) {
nextField = fields.itemAt(currentFieldIdx + 1);
nextField && nextField.focus();
}
Tab
PS dispatchEvent()を介して人為的にキーを押すことができますが、セキュリティ上の理由から、タブナビゲーションアクションはトリガーされません。