无线电组键盘导航
Radiogroup keyboard navigation
我有一个设置为 table 布局的无线电组:
https://fiddle.sencha.com/#view/editor&fiddle/2ehg
如果您使用向左、向右、向上和向下键在该单选按钮组中导航,这种行为是不直观的。我搜索了代码并尝试调试收音机上的 focus
事件,但没有找到 how/where ExtJS 代码在组件中导航。
如何改进键盘导航使其表现自然?
通过 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 ...
我有一个设置为 table 布局的无线电组:
https://fiddle.sencha.com/#view/editor&fiddle/2ehg
如果您使用向左、向右、向上和向下键在该单选按钮组中导航,这种行为是不直观的。我搜索了代码并尝试调试收音机上的 focus
事件,但没有找到 how/where ExtJS 代码在组件中导航。
如何改进键盘导航使其表现自然?
通过 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 ...