如何使用Ext JS中的箭头键禁用选项卡导航？

Question

When tab is in focus, it is possible to navigate between tabs using arrow keys ( → , ← ). I want to disable this behaviour.

Example tab panel: http://examples.sencha.com/extjs/6.0.2/examples/kitchensink/#basic-tabs

Answer 1

The config you are looking for is in the Ext.tab.Bar class, and it's called activateOnFocus.

Here's the tab panel example modified to avoi navigation with arrow keys

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

this worked for me!

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

});