Component Focus & Blur
 

Здравствуйте!

Почему если вызвать метод component.focus() не генерируется событие focus у этого компонента?

Или как пользоваться этими событиями и методами компонент: Focus & Blur?

странно, конечно, но в документации написано, что вызов focus() приводит к генерации события tofront.

http://docs.sencha.com/extjs/5.1/5.1...t-method-focus

А пользоваться так. Нужно в определении компонента написать свою реализацию шабонного метода postFocus или postBlur:

/**
     * Template method to do any post-focus processing.
     * @protected
     * @param {Ext.event.Event} e The event object
     */
    postFocus: Ext.emptyFn,

http://docs.sencha.com/extjs/5.1/5.1...thod-postFocus

Хотя лично у меня нет опыта работы с postFocus. Напишите, помогло ли это решение.

Странно то, что события tofront тоже вроде как нет. По крайней мере по документации.

Писать методы post* страннно как-то...

Я думал как использовать: Если я выделил объект на экране, то он в фокусе. Если я выделил какой другой объект и вызвал у него метод focus, то предыдущий объект тут же теряет фокус. Это удобно тем, что мне не нужно специально искать какой же объект сейчас в фокусе, снимать с него фокус и ставить фокус на объект, который сейчас пытаемся выделить.

Я думал что такая стандартная функция уже реализована...

Похоже придется дописать эту функцию... для всех компонент. Надеюсь без override.

Попробовал эту штуку

To activate the FocusManager, simply call Ext.FocusManager.enable();. In turn, you may deactivate the FocusManager by subsequently calling Ext.FocusManager.disable();. The FocusManager is disabled by default.

http://docs.sencha.com/extjs/5.1/5.1...-method-enable

Но к сожалению на строке Ext.FocusManager.enable(); выдает ошибку. В чем там проблема пока не ясна, уж больно велик стек))))

Нашел способ вставки команды. Если так записать, то ошибки уже нету:

Ext.onReady(function() {
	Ext.FocusManager.enable();
...

Но к сожалению это ничего не дало. События focus|blur не появляются.

Нашел опцию

http://docs.sencha.com/extjs/5.1/5.1...erty-focusable

Поставил в своих компонентах равной true.

И снова не работает...

Что еще нужно сделать, чтобы этот механизм троклятый заработал?

Вот пример https://fiddle.sencha.com/#fiddle/lgf

console.clear();

Ext.FocusManager.enable(true);

Ext.define("MyComponent", {
    
    extend: "Ext.Component",
    
    focusable: true
    
});

var comp = Ext.create("MyComponent", {
    renderTo: Ext.getBody(),
    html: "Тестовый компонент"
});

comp.on("focus", function() {
    console.log("FOCUS");
});

comp.on("blur", function() {
    console.log("BLUR");
});



comp.focus();
comp.blur();

Пока это дело не работает.

Может из-за того, что элементом компонента является DIV?

Да, точно. Нужно ещё писать focusable.

Ext.application({
    name : 'Fiddle',

    launch : function() {

        Ext.define("MyComponent", {
            extend: "Ext.Component",
            focusable: true,
            onFocus: function() {
                alert(1);
                this.callParent(arguments);
                
            },
            postFocus: function() {
                alert(2);
            }
            
        });
        
        var comp = Ext.create("MyComponent", {
            renderTo: Ext.getBody(),
            html: "Тестовый компонент"
        });
        
        comp.focus();

    }
});

фидл

1) Не работает. Алерты не всплывают. У вас этот пример что, работающий?

2) И самого главного нет - генерации событий focus|blur!

Так... я подставил вместо DIV тег INPUT и все заработало. Оказывается целевой элемент должен поддерживать focus/blur. DIV не может быть фокусируемым, а вот INPUT может. Теперь ясно в чем проблема... Правда не ясно что делать, если у меня компонент допустим окно. Оно ведь на DIV-ах построено же... Есть ли какой-нибудь безобидный тег, поддерживаемый focus/blur?