ExtJS4.1中多面板快捷键冲突解决方案：KeyMap应用与div元素tabindex设置

在ExtJS 4.1中，实现多个面板（例如`panelA`和`panelB`）的快捷键支持时，可能会遇到一些挑战。问题的核心在于如何正确设置快捷键映射，特别是当页面上存在多个具有相同快捷键的按钮（如“添加(F2)”）时。原始的实现思路是利用`Ext.util.KeyMap`来绑定不同的事件处理函数，针对每个面板（通过`target`属性指定）。 第一次尝试的代码示例中，创建了两个`KeyMap`实例，分别针对`panelA`和`panelB`，并设置`key`为`Ext.EventObject.F2`，即F2键。然而，实际运行时，无论直接按F2还是先点击面板再按F2，快捷键都无效。这可能是由于默认情况下，浏览器会优先响应焦点元素的键盘事件，而`KeyMap`可能并未获得焦点。 为了解决这个问题，第二次实现引入了一个关键的调整：确保包含快捷键按钮的div元素具有`tabindex=0`属性，这样可以确保这些元素在接收到键盘焦点时能正确响应快捷键。`tabindex`属性用于定义元素在文档中的焦点顺序，值为0表示该元素在焦点切换时会被考虑。 修正后的代码示例将包含以下改动： 1. 在创建面板时，为其包含的按钮添加`tabindex`属性，例如： ```javascript items: [{ // ... tbar: [{ text: '添加(F2)', tabIndex: 0 // 添加这个属性 }] // ... }] ``` 2. 创建`KeyMap`时，使用带有`tabIndex`的按钮元素作为`target`，而不是面板本身： ```javascript Ext.create('Ext.util.KeyMap', { target: document.getElementById('addButtonA'), // 替换为实际按钮的id key: Ext.EventObject.F2, fn: function(key, ev) { alert('添加A'); ev.stopEvent(); return false; } }); ``` 同样的，对于`panelB`的按钮也做同样的修改。 通过以上调整，`KeyMap`将能正确地与带有`tabindex`的按钮关联，并在用户按下F2键时触发对应的事件处理函数。这解决了在ExtJS 4.1中同时处理多个具有相同快捷键的按钮的问题。需要注意的是，实际项目中可能还需要进一步检查浏览器兼容性和事件处理的优先级，确保在所有预期的使用场景下都能正常工作。