ExtJS 6.x 现代组件焦点答案

【问题标题】：ExtJS 6.x Modern Component FocusExtJS 6.x 现代组件焦点
【发布时间】：2017-12-10 00:58:29
【问题描述】：

在 ExtJS 6.x Modern 中，如何制作可以聚焦的组件。

我已尝试同时使用 tabIndex: 0, focusable: true 并阅读了 https://docs.sencha.com/extjs/6.5.2/modern/Ext.mixin.Focusable.html 的所有文档和代码，但无论我尝试什么，我都无法让容器聚焦。

此外，您如何检测到容器失去焦点？有没有办法收听一些焦点离开事件？

【问题讨论】：

你想在这里实现什么？你有小提琴吗？ blur 是组件失去焦点时触发的事件。
如果我有文本域 a、文本域 b、我的组件、文本域 c。如果我单击 a，然后按一次 tab，它应该转到 textifeld b，如果我再次按 tab，它应该转到我的组件（或不可见），然后当我再次按 tab 时，它应该转到 textfield c。我无法使组件具有焦点。对不起，没有小提琴，我想我应该做一个煎茶小提琴帐户。
你的组件是什么类型的？例如panel？

标签： javascript extjs extjs6 extjs6-modern

【解决方案1】：

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

关注字段 B 并开始按下选项卡按钮..

【讨论】：