ExtJS 6.x Modern Component Focus

Question

In ExtJS 6.x Modern, how do you make a component that can focus.

I have tried using both tabIndex: 0, focusable: true and have read through all the documentation and code of https://docs.sencha.com/extjs/6.5.2/modern/Ext.mixin.Focusable.html but whatever I try I can not get the container to focus.

In addition how do you detect that the container has lost focus? is there a way of listening to some focus leave event?

What are you trying to achieve here? Do you have a fiddle? [blur](http://docs.sencha.com/extjs/6.5.2/modern/Ext.Container.html#event-blur) is the event that is being fired when a component loses focus. — Zoti, Dec 13 '17 at 09:06
If I have textfield a, textfield b, my component, textfield c. If I click in a, and press tab once, it should goto textifeld b, if i press tab again it should goto my component (or be invisible) and then when i press tab again it should goto textfield c. I'm unable to make the component focusable. Sorry no fiddle, I suppose I should make a sencha fiddle account. — Tony J Watson, Dec 13 '17 at 11:42

Zoti · Accepted Answer · 2017-12-13T14:14:55.930

Add the code below inside a sencha fiddle:

Ext.application({
name : 'Fiddle',

launch : function() {
Ext.create({
xtype: 'panel',
fullscreen: true,
bodyPadding: true, // don't want content to crunch against the borders
title: 'Focusable Elements',
items: [{
    xtype: 'textfield',
    label: 'field A',
    tabIndex: 2,
    listeners: {
        blur: function (field) {
            console.log('field A loses focus!')
        }
    }
}, {
    xtype: 'textfield',
    label: 'field B',
    tabIndex: 1,
    listeners: {
        blur: function (field) {
            console.log('field B loses focus!')
        }
    }
}, {
    xtype: 'panel',
    title: 'Panel 1',
    height: 200,
    html: 'Focus on Me!',
    tabIndex: 4,
    focusable: true,
    layout: {
        type: 'vbox',
        align: 'stretch',
        pack: 'start'
    },
    listeners: {
        blur: function (panel) {
            console.log('Panel 1 Lost Focus!');
        },
        focus: function (panel) {
            console.log('Panel 1 Got Focus!');
        }
    }
}, {
    xtype: 'panel',
    title: 'Panel 2',
    height: 200,
    html: 'Focus on Me!',
    tabIndex: 5,
    focusable: true,
    layout: {
        type: 'vbox',
        align: 'stretch',
        pack: 'start'
    },
    listeners: {
        blur: function (panel) {
            console.log('Panel 2 Lost Focus!');
        },
        focus: function (panel) {
            console.log('Panel 2 Got Focus!');
        }
    }
    },{
    xtype: 'textfield',
    label: 'field D',
    tabIndex: 3,
    listeners: {
        blur: function (field) {
            console.log('field D loses focus!')
        }
    }
}],
});
}
});

focus on field B and start pressing the tab button..

ExtJS 6.x Modern Component Focus

1 Answers1