如何在 Ext JS 中使用箭头键禁用选项卡面板导航?
How to disable tabpanel navigation using arrow keys in Ext JS?
当标签处于焦点时,可以使用箭头键在标签之间导航(→、←)。我想禁用此行为。
标签面板示例:
http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#basic-tabs
您要查找的配置在 Ext.tab.Bar class 中,它称为 activateOnFocus。
这是修改为避免使用箭头键导航的选项卡面板示例
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
tabBar: {
activateOnFocus: false
},
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
这对我有用!
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
tabBar: {
defaults: {
flex: 1
}
},
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
当标签处于焦点时,可以使用箭头键在标签之间导航(→、←)。我想禁用此行为。
标签面板示例: http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#basic-tabs
您要查找的配置在 Ext.tab.Bar class 中,它称为 activateOnFocus。
这是修改为避免使用箭头键导航的选项卡面板示例
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
tabBar: {
activateOnFocus: false
},
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});
这对我有用!
Ext.create('Ext.tab.Panel', {
width: 400,
height: 400,
renderTo: document.body,
tabBar: {
defaults: {
flex: 1
}
},
items: [{
title: 'Foo'
}, {
title: 'Bar',
tabConfig: {
title: 'Custom Title',
tooltip: 'A button tooltip'
}
}]
});