在ExtJS 6.x Modern中,如何制作可以聚焦的组件。
我尝试过使用tabIndex:0,focusable:true并阅读https://docs.sencha.com/extjs/6.5.2/modern/Ext.mixin.Focusable.html的所有文档和代码,但无论我尝试什么,我都无法集中注意容器。
另外,您如何检测到容器丢失了焦点?有没有办法听取一些焦点休假事件?
答案 0 :(得分:0)
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!')
}
}
}],
});
}
});
关注字段B并开始按标签按钮..