无线电组键盘导航

Question

我有一个设置为 table 布局的无线电组：

https://fiddle.sencha.com/#view/editor&fiddle/2ehg

如果您使用向左、向右、向上和向下键在该单选按钮组中导航，这种行为是不直观的。我搜索了代码并尝试调试收音机上的 focus 事件，但没有找到 how/where ExtJS 代码在组件中导航。

如何改进键盘导航使其表现自然？

Answer 1

通过 keyMap 配置并监听导航键事件，您可以防止浏览器默认设置，计算新位置并进行设置。查看工作 fiddle.

它的反应比你想象的要多。当您在第一个项目上并按 up-button 时，新的焦点项目是该行中的最后一个项目。

您可能需要相应地左右调整以满足您的需要。

// get the id for the component from the event
const getPureId = (event) => event.target.id.split('-').splice(0, 2).join('-');
const columnCount = 2;
const maxIndex = 5;
const minIndex = 0;

// config of the panel ...
keyMap : {
    [Ext.event.Event.DOWN]: (event, panel) => {
        var pureId = getPureId(event);
        var comp = Ext.get(pureId).component;
        var pos = panel.items.indexOf(comp);
        var newPos = pos + columnCount;

        // when the newPos is outside of our boundaries we calculate the new one
        // based on the columnCount
        if (newPos > maxIndex) {
            newPos = newPos % (columnCount + 1);
        }

        event.preventDefault();
        panel
          .getComponent(newPos)
          .focus()
          .setValue(true);
    }, [Ext.event.Event.UP]: (event, panel) => {
        var pureId = getPureId(event);
        var comp = Ext.get(pureId).component;
        var pos = panel.items.indexOf(comp);
        var newPos = pos - columnCount;

        // when the newPos is outside of our boundaries we calculate the new one
        // based on the maxIndex
        if (newPos < minIndex) {
            newPos = newPos + maxIndex + 1;
        }

        event.preventDefault();
        panel
          .getComponent(newPos)
          .focus()
          .setValue(true);
    }
},
// more config of the panel ...

无线电组键盘导航

Radiogroup keyboard navigation

extjs

extjs6

keyboard-navigation