ExtJS 使用 Tab 在两个网格之间导航答案

【问题标题】：ExtJS Using Tab to navigate between two gridsExtJS 使用 Tab 在两个网格之间导航
【发布时间】：2014-05-03 06:28:42
【问题描述】：

我有一个包含两个网格的面板，这两个网格都可以使用单元格编辑插件进行编辑。在网格内，用户可以使用 tab 键在可编辑字段之间移动。但是，我似乎找不到正确的方法来获取 tab 键以允许用户从第一个网格中的最后一个可编辑单元格移动到第二个网格中的第一个可编辑单元格（两个网格之间没有组件）。用户只是停留在第一个网格的最后一个可编辑字段中。

我尝试使用 FocusManager，但这使得键盘导航更加复杂，而不是更少，需要使用箭头键进入和退出每个表单元素和网格。

我将此代码添加到父面板：

var nav = new Ext.util.KeyNav(Ext.getDoc(), {
tab: function(e) {
console.debug('TAB HIT!', arguments);
},
scope: this
});
nav.enable();

只是为了查看检测到哪些选项卡，但它仅在单击选项卡键并且父面板本身中的表单元素具有焦点时才会激活。

我想我需要学习一些元素，如何将焦点从一个元素传递到另一个元素，以及如何检测网格中的第一个和最后一个元素？或者有什么方法可以在 ExtJS 中内置？任何建议或意见将不胜感激。

【问题讨论】：

试试这个解决方案lukehorvat.com/blog/excel-grid-plugin-for-ext-js-4
我查看了那个插件，但它仍然没有提供我需要的功能。如果我在页面中放入两个面板（例如，只是复制 JSFiddle 中示例中的面板），当我到达第一个面板的最后一个单元格时，我不能从键盘选项卡到第二个面板的第一个单元格面板。

标签： javascript extjs keyboard-navigation

【解决方案1】：

我会将新的cellkeydown event 用于网格面板。

为该事件实现一个处理程序，检查键类型以及单元格是否是网格中的最后一列，然后在另一个网格中相应行的第一列中开始单元格编辑。

您可以从该事件传递的第 7 个参数中找出它是否是 TAB 键。

您可以从事件传递的第三个参数中找出它是否是网格中的最后一个单元格。

rowIndex 是第 6 个参数 - 使用它可以知道在另一个网格中开始编辑哪一行。

顺便说一句，可以使用on method 将事件处理程序添加到组件中。

您也可以在APIhere中查找开始单元格编辑需要调用的函数。

如果您有更多代码，也许还有赏金，我可能会得到更具体的信息，但这就是我将如何做到这一点的要点。

【讨论】：