Question

我有一个以表格布局设置的广播组：

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

如果使用向左，向右，向上和向下键导航该无线电组，则行为不直观。我搜索了代码并尝试调试无线电上的focus事件，但没有找到ExtJS代码在组件中导航的方式/位置。

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

Answer 1

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

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

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

// 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键盘导航

1 个答案: