ExtJS4.2：快速鍵支援（沒有你想象的那麼簡單）

一個頁面有兩個面板，都有一個【添加(F2)】按鈕，如何做快速鍵支援？圖片示意

第一次實現感覺應該很簡單，ExtJs提供了“Ext.util.KeyMap”，很容易做快速鍵支援。程式碼範例
 1 /// <reference path="Ext/ext-all-debug-w-comments.js" />
 2
 3 Ext.onReady(function () {
 4
 5     var viewport = Ext.create('Ext.container.Viewport', {
 6         layout: {
 7             type: 'vbox',
 8             align: 'stretch'
 9         },
10         padding: 10,
11         items: [{
12             xtype: 'panel',
13             id: 'panelA',
14             title: '快速鍵測試A',
15             tbar: [{
16                 text: '添加(F2)'
17             }],
18             frame: true,
19             flex: 1,
20             html: '您好，這裡顯示的表格或表單 。'
21         }, {
22             xtype: 'panel',
23             id: 'panelB',
24             title: '快速鍵測試B',
25             tbar: [{
26                 text: '添加(F2)'
27             }],
28             frame: true,
29             flex: 1,
30             html: '您好，這裡顯示的表格或表單 。'
31         }]
32     });
33
34     Ext.create('Ext.util.KeyMap', {
35         target: 'panelA',
36         key: Ext.EventObject.F2,
37         fn: function (key, ev) {
38             alert('添加A');
39
40             ev.stopEvent();
41
42             return false;
43         }
44     });
45
46     Ext.create('Ext.util.KeyMap', {
47         target: 'panelB',
48         key: Ext.EventObject.F2,
49         fn: function (key, ev) {
50             alert('添加B');
51
52             ev.stopEvent();
53
54             return false;
55         }
56     });
57 });實際結果開啟瀏覽器後直接按F2沒有效果；開啟瀏覽器後用滑鼠點擊A或B後再按F2同樣沒有效果。

第二次實現原來是div元素必須增加tabindex=0的屬性才行。程式碼範例
 1 /// <reference path="Ext/ext-all-debug-w-comments.js" />
 2
 3 Ext.onReady(function () {
 4
 5     var viewport = Ext.create('Ext.container.Viewport', {
 6         layout: {
 7             type: 'vbox',
 8             align: 'stretch'
 9         },
10         padding: 10,
11         items: [{
12             xtype: 'panel',
13             id: 'panelA',
14             title: '快速鍵測試A',
15             tbar: [{
16                 text: '添加(F2)'
17             }],
18             frame: true,
19             flex: 1,
20             html: '您好，這裡顯示的表格或表單 。',
21             autoEl: {
22                 tag: 'div',
23                 tabindex: 0
24             }
25         }, {
26             xtype: 'panel',
27             id: 'panelB',
28             title: '快速鍵測試B',
29             tbar: [{
30                 text: '添加(F2)'
31             }],
32             frame: true,
33             flex: 1,
34             html: '您好，這裡顯示的表格或表單 。',
35             autoEl: {
36                 tag: 'div',
37                 tabindex: 0
38             }
39         }]
40     });
41
42     Ext.create('Ext.util.KeyMap', {
43         target: 'panelA',
44         key: Ext.EventObject.F2,
45         fn: function (key, ev) {
46             alert('添加A');
47
48             ev.stopEvent();
49
50             return false;
51         }
52     });
53
54     Ext.create('Ext.util.KeyMap', {
55         target: 'panelB',
56         key: Ext.EventObject.F2,
57         fn: function (key, ev) {
58             alert('添加B');
59
60             ev.stopEvent();
61
62             return false;
63         }
64     });
65 });實際結果開啟瀏覽器後直接按F2沒有效果；開啟瀏覽器後用滑鼠點擊A或B後再按F2就有效果了。

第三次實現要解決開啟瀏覽器之後不用點擊div就能識別快速鍵，需要手動調用foucs()方法。程式碼範例
 1 /// <reference path="Ext/ext-all-debug-w-comments.js" />
 2
 3 Ext.onReady(function () {
 4
 5     var viewport = Ext.create('Ext.container.Viewport', {
 6         layout: {
 7             type: 'vbox',
 8             align: 'stretch'
 9         },
10         padding: 10,
11         items: [{
12             xtype: 'panel',
13             id: 'panelA',
14             title: '快速鍵測試A',
15             tbar: [{
16                 text: '添加(F2)'
17             }],
18             frame: true,
19             flex: 1,
20             html: '您好，這裡顯示的表格或表單 。',
21             autoEl: {
22                 tag: 'div',
23                 tabindex: 0
24             }
25         }, {
26             xtype: 'panel',
27             id: 'panelB',
28             title: '快速鍵測試B',
29             tbar: [{
30                 text: '添加(F2)'
31             }],
32             frame: true,
33             flex: 1,
34             html: '您好，這裡顯示的表格或表單 。',
35             autoEl: {
36                 tag: 'div',
37                 tabindex: 0
38             }
39         }]
40     });
41
42     Ext.create('Ext.util.KeyMap', {
43         target: 'panelA',
44         key: Ext.EventObject.F2,
45         fn: function (key, ev) {
46             alert('添加A');
47
48             ev.stopEvent();
49
50             return false;
51         }
52     });
53
54     Ext.create('Ext.util.KeyMap', {
55         target: 'panelB',
56         key: Ext.EventObject.F2,
57         fn: function (key, ev) {
58             alert('添加B');
59
60             ev.stopEvent();
61
62             return false;
63         }
64     });
65
66     Ext.get('panelB').focus();
67 });