ExtJS 6.x Современное внимание к компонентам

Как в ExtJS 6.x Modern сделать компонент, который может фокусироваться.

Я пытался использовать как tabIndex: 0, focusable: true, так и прочитал всю документацию и код https://docs.sencha.com/extjs/6.5.2/modern/Ext.mixin.Focusable..html, но что бы я ни пытался, я не могу получить контейнер фокус.

Кроме того, как определить, что контейнер потерял фокус? есть ли способ прослушать какое-то событие фокуса?


javascript extjs extjs6 extjs6-modern
person Tony J Watson    schedule 10.12.2017    source источник
comment
Чего вы пытаетесь достичь здесь? У тебя есть скрипка? blur — это событие, которое срабатывает, когда компонент теряет фокус.   -  person Zoti    schedule 13.12.2017
comment
Если у меня есть текстовое поле a, текстовое поле b, мой компонент, текстовое поле c. Если я нажму a и один раз нажму вкладку, он должен перейти к текстовому полю b, если я снова нажму вкладку, он должен перейти к моему компоненту (или быть невидимым), а затем, когда я снова нажму вкладку, он должен перейти к текстовому полю c. Я не могу сделать компонент фокусируемым. Извините, нет скрипки, я полагаю, мне следует создать учетную запись sencha fiddle.   -  person Tony J Watson    schedule 13.12.2017
comment
Каков тип вашего компонента? panel например?   -  person Zoti    schedule 13.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Добавьте приведенный ниже код в сенча-скрипку:

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 и начните нажимать кнопку табуляции.

person Zoti    schedule 13.12.2017