关于ExtJS4.1:中快捷键支持的问题

问题：一页上有两个面板，都有一个[添加(F2)]按钮。如何支持快捷键？图片示意图

第一次实现感觉应该很简单，ExtJs提供了“Ext.util.KeyMap”，很容易做快捷键支持。代码示例复制代码代码如下：///引用路径=' Ext/Ext-all-debug-w-comments。js '/Ext。onready(function(){ var viewport=Ext。创建(' Ext。集装箱。视口')，{ layout: { type: 'vbox '，align: 'stretch' }，padding: 10，items 3:[{ xtype : ' panel '，id: ' panelA '，title: '快捷键测试a '，tbar :[{ text : }添加(F2)' }]，frame: true，flex: 1，html: '您好，这里显示的表格或表单。}，{ xtype: 'panel '，id: 'panelB '，title: '快捷键测试' b '，tbar: [{ text: '添加(F2)' }]，frame: true，flex: 1，html: '您好，这里显示的表格或表单。'}] });Ext.create('Ext.util.KeyMap '，{ target: 'panelA '，key: Ext .EventObject。F2，fn:函数（键，ev) { alert('添加a ')；ev。stop事件()；返回false } })；Ext.create('Ext.util.KeyMap '，{ target: 'panelB '，key: Ext .EventObject。F2，fn:函数（键，ev) { alert('添加b’)；ev。stop事件()；返回false } })；});实际结果打开浏览器后直接按第二子代没有效果；打开浏览器后用鼠标点击A或B后再按第二子代同样没有效果。第二次实现原来是差异元素必须增加tabindex=0的属性才行。代码示例复制代码代码如下：///引用路径=' Ext/Ext-all-debug-w-comments。js '/Ext。onready(function(){ var viewport=Ext。创建(' Ext。集装箱。视口')，{ layout: { type: 'vbox '，align: 'stretch' }，padding: 10，items 3:[{ xtype : ' panel '，id: ' panelA '，title: '快捷键测试a '，tbar :[{ text : }添加(F2)' }]，frame: true，flex: 1，html: '您好，这里显示的表格或表单。autoEl: { tag: 'div '，tabindex: 0 } }，{ xtype: 'panel '，id: 'panelB '，title: '快捷键测试' b '，tbar: [{ text: '添加(F2)' }]，frame: true，flex: 1，html: '您好，这里显示的表格或表单。'，autoEl: { tag: 'div '，tabinde x : { 0 } }]})；Ext.create('Ext.util.KeyMap '，{ target: 'panelA '，key: Ext .EventObject。F2，fn:函数（键，ev) { alert('添加a ')；ev。stop事件()；返回false } })；Ext.create('Ext.util.KeyMap '，{ target: 'panelB '，key: Ext .EventObject。F2，fn:函数（键，ev) { alert('添加b’)；ev。stop事件()；返回false } })；});实际结果打开浏览器后直接按第二子代没有效果；打开浏览器后用鼠标点击A或B后再按第二子代就有效果了。第三次实现要解决打开浏览器之后不用点击差异就能识别快捷键，需要手动调用foucs()方法。代码示例复制代码代码如下：///引用路径=' Ext/Ext-all-debug-w-comments。js '/Ext。onready(function(){ var viewport=Ext。创建(' Ext。集装箱。视口')，{ layout: { type: 'vbox '，align: 'stretch' }，padding: 10，items 3:[{ xtype : ' panel '，id: ' panelA '，title: '快捷键测试a '，tbar :[{ text : }添加(F2)' }]，frame: true，flex: 1，html: '您好，这里显示的表格或表单。autoEl: { tag: 'div '，tabindex: 0 } }，{ xtype: 'panel '，id: 'panelB '，title: '快捷键测试' b '，tbar: [{ text: '添加(F2)' }]，frame: true，flex: 1，html: '您好，这里显示的表格或表单。'，autoEl: { tag: 'div '，tabinde x : { 0 } }]})；Ext.create('Ext.util.KeyMap '，{ target: 'panelA '，key: Ext .EventObject。F2，fn:函数（键，ev) { alert('添加a ')；ev。stop事件()；返回false } })；Ext.create('Ext.util.KeyMap '，{ target: 'panelB '，key: Ext .EventObject。F2，fn:函数（键，ev) { alert('添加b’)；ev。stop事件()；返回false } })；Ext.get('panelB ').焦点();});实际结果打开浏览器后直接按第二子代有效果了；打开浏览器后用鼠标点击A或B后再按第二子代就有效果了。