如何使用Ext JS中的箭頭鍵禁用選項卡導航？

Question

當標簽處於焦點位置時，可以使用箭頭鍵（ → ， ← ）在標簽之間導航。 我想禁用此行為。

示例標簽面板： http : //examples.sencha.com/extjs/6.0.2/examples/kitchensink/#basic-tabs

Answer 1

您要查找的配置位於Ext.tab.Bar類中，它稱為ActivateOnFocus。

這是修改為使用箭頭鍵進行avoi導航的選項卡面板示例

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'
        }
    }]
});

Answer 2

這對我有用！

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'
    }
}]

}）;