Radiogroup keyboard navigation - extjs

Question

I have a radio group that is set in a table layout:
https://fiddle.sencha.com/#view/editor&fiddle/2ehg
If you navigate around that radio group with left, right, up and down keys, the behaviour is unintuitive. I have searched the code and tried to debug the focus event on the radios, but did not find how/where ExtJS code navigates through the components.
How can I improve the keyboard navigation such that it behaves natural?

Answer 1

With the keyMap config and listening on the navigation key events you can prevent the browser default, calculate the new position and set it.
See the working fiddle.
It reacts more than you would expect. When you are on the first item and you press the up-button the new focused item is the last one in the row.
You may have to tweak left and right accordingly to fit your needs.
// 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 ...