ExtJS4.1について: ショートカットキーsupport_javascriptスキルの問題

質問: ページには 2 つのパネルがあり、両方のパネルに [追加 (F2)] ボタンがあります。ショートカット キーをサポートするにはどうすればよいですか?絵表示

最初の実装
ExtJs はショートカット キーのサポートを容易にする「Ext.util.KeyMap」を提供するように感じます。
コード例

コードをコピー コードは次のとおりです:

/ // < ;reference path="Ext/ext-all-debug-w-comments.js" />

Ext.onReady(function () {

var viewport = Ext. create(' Ext.container.Viewport', {
レイアウト: {
タイプ: 'vbox',
align: 'stretch'
},
パディング: 10,
アイテム: [{
xtype: 'panel',
id: 'panelA',
title: 'ショートカットキーテストA',
tbar: [{
Text: '追加(F2) '
xtype: 'panel',
id: 'panelB',
title: 'ショートカットキーテストB',
tbar: [{
text: '追加(F2)'
}],
Frame: true,
flex: 1,
html: 'こんにちは、ここに示されているテーブルまたはフォームです。'
}]
});

ext.create（ 'ext。util.keymap'、{
to🎜>
ev.stopevent（）;

return false;
}）;

Ext.create('Ext.util.KeyMap', {
target: 'panelB',
key: Ext.EventObject.F2,
fn: function (key, ev) {
アラート('B を追加');

ev. stopEvent();

return false;
}
});
});
実際の結果

ブラウザを開いた後 F2 を直接押しても効果はありません。ブラウザを開いてマウスで A または B をクリックしてから F2 を押しても効果はありません。

2 番目の実装

div 要素には属性 tabindex=0 を追加する必要があることがわかります。
コード例

コードをコピー


コードは次のとおりです。

/// <参照パス="Ext/ext-all-debug-w-comments.js" />

Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {
レイアウト: {
タイプ: 'vbox',
align: 'stretch'
},
パディング：10、
項目：[{ text： 'add（f2）'
}]、
frame：true、。 'div',
tabindex: 0
}
}, {
XType: 'Panel',
ID: 'Panelb',
Title: 'ショートカット キー テスト B',
tbar: [{
text: '追加 (F2)'
}],
Frame: true,
flex: 1,
html: 'こんにちは、テーブルまたはフォームここに表示されます。
}]
});

Ext.create('Ext.util.KeyMap', {
ターゲット: 'panelA',
キー: Ext .EventObject.F2,
fn: function (key, ev) {
alert('Add A') 🎜> Ext.Create ('EXT.UTIL.KEYMAP', {
ターゲット: 'Panelb') ',
キー: Ext.eventobject.f2,
Fn: 関数 (キー, EV) {
アラート ('B に追加');

ev.stopEvent();

return false;
}
});
});


実際の結果
ブラウザを開いた直後に F2 を押しても効果はありません。ブラウザを開いてマウスで A または B をクリックしてから F2 を押すと効果があります。

3 番目の実装
ブラウザを開いた後に div をクリックせずにショートカット キーを認識する問題を解決するには、手動で foucs() メソッドを呼び出す必要があります。
コード例

コードをコピー コードは次のとおりです。

/// <参照パス="Ext/ext-all-debug-w-comments.js" />

Ext.onReady(function () {

var viewport = Ext.create('Ext.container.Viewport', {
レイアウト: {
タイプ: 'vbox',
align: 'stretch'
},
パディング：10、
項目：[{ text： 'add（f2）'
}]、
frame：true、。 'div',
tabindex: 0
}
}, {
XType: 'Panel',
ID: 'Panelb',
Title: 'ショートカット キー テスト B',
tbar: [{
text: '追加 (F2)'
}],
Frame: true,
flex: 1,
html: 'こんにちは、テーブルまたはフォームここに表示されます。
}]
});

Ext.create('Ext.util.KeyMap', {
ターゲット: 'panelA',
キー: Ext .EventObject.F2,
fn: function (key, ev) {
alert('Add A') 🎜> Ext.Create ('EXT.UTIL.KEYMAP', {
ターゲット: 'Panelb') ',
キー: Ext.eventobject.f2,
Fn: 関数 (キー, EV) {
アラート ('B に追加');

ev.stopEvent();

return false;
}
});

Ext.get('panelB'). focus();
});


実際の結果
ブラウザを開いて F2 を直接押すと効果が得られます。ブラウザを開いてマウスで A または B をクリックして F2 を押すと機能します。