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 });
实际结果
打开浏览器后直接按F2有效果了；打开浏览器后用鼠标点击A或B后再按F2就有效果了。
备注
这个Demo纯属为了学习如何支持快捷键，真实项目中的快捷键支持需要通过封装在应用框架，做到对开发人员透明。
