ExtJS4.2：快捷鍵支持（沒有你想象的那么簡單）

本文轉載自查看原文 2013-04-24 06:59 4424 ExtJS

問題

一個頁面有兩個面板，都有一個【添加(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 });

實際結果

打開瀏覽器后直接按F2有效果了；打開瀏覽器后用鼠標點擊A或B后再按F2就有效果了。

備注

這個Demo純屬為了學習如何支持快捷鍵，真實項目中的快捷鍵支持需要通過封裝在應用框架，做到對開發人員透明。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 ExtJS4.2學習(七)EditorGrid可編輯表格(轉) ExtJS4.2：自定義主題入門 myeclipse/eclipse添加Spket插件實現ExtJs4.2/ExtJs3智能提示 Excel 簡單操作快捷鍵 IDEA自定義設置快捷鍵輸出你想要的語句！ NetBeans 快捷鍵 AS 常用快捷鍵 KALI快捷鍵 sublime 快捷鍵 IDEA 快捷鍵