Reputation: 709
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?
Upvotes: 0
Views: 1124
Reputation: 892
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..
Upvotes: 0