Нашел способ как обойти этот нюанс. Правда способ не хороший на вид. Ибо в дереве DOM болтается лишний input (который приходится скрывать, причем скрывать нехорошим способом, ибо если его скрыть нормальным способом, то механизм не работает).
Вот код: https://fiddle.sencha.com/#fiddle/lgr
console.clear();
Ext.FocusManager.enable(true);
Ext.define("MyComponent", {
extend: "Ext.Component",
focusable: true,
focusEl: null,
privates: {
getFocusEl: function() {
return this.focusEl;
},
},
initFocusable: function() {
this.focusEl = Ext.create("Ext.Element", document.createElement("input"));
this.focusEl.appendTo(Ext.getBody());
this.focusEl.applyStyles({
position: "absolute",
top: "-5000px",
left: "-5000px"
});
}
});
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();
|
Теперь вопрос, как сделать фокусируемый компонент для случая, когда DOM-элемент компонента не является фокусируемый и при этом не использовать "грязные" способы, подобные тем, что я использовал выше? Например для окошек, которые построены на DIV-ах.
|
Ура, нашел способ без грязных методов.
Вот код: https://fiddle.sencha.com/#fiddle/lgs
console.clear();
Ext.FocusManager.enable(true);
Ext.define("MyComponent", {
extend: "Ext.Component",
focusable: true,
initFocusable: function() {
var me = this;
me.on("render", function() {
Ext.override(this.getEl(), {
focus: function() {
this.callParent(arguments);
me.onFocus();
},
blur: function() {
this.callParent(arguments);
me.onBlur();
}
});
});
}
});
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();
Здесь я внедрил в элемент компонента недостающий функционал, а именно вызовы методов me.onFocus() и me.onBlur() и все заработало без всяких левых тегов типа инпута. Остался последний штрих - оформить этот код в виде миксина, чтобы можно было одной строчкой его внедрять в любой компонент. |
Проблема решена полностью, чисто!
Миксин писать не надо. Итак, чтобы компонент сделать фокусируемый нужно добавить в него всего лишь две строчки. Вот код компонента с этими двумя строчками:
Ext.define("MyComponent", {
extend: "Ext.Component",
focusable: true,
tabIndex: 0, // без этой строчки не работает механизм фокусировки
});
Полдня блин убил чтобы выяснить, что обязательно нужно прописать tabIndex: 0! |
Почти правильно, но не совсем. Устанавливая tabIndex: 0 вы тем самым не только делаете компонент фокусируемым, но ещё и добавляете его в tab order. Обычно это как раз то, что и нужно, но не всегда. Чтобы сделать компонент просто фокусируемым, но без возможности клавиатурной навигации, присвойте ему негативный tabIndex (обычно -1).
Более подробное объяснение: компоненты в Ext JS имеют отображение в DOM. Есть такое понятие: главный элемент; этот элемент содержит в себе всю остальную разметку компонента. Конфигурация главного элемента задаётся свойством autoEl компонента, и по умолчанию тегом является DIV. Возвращаясь к фокусировке, DIV элементы по умолчанию не являются фокусируемыми, в отличие от INPUT. Чтобы сделать DIV фокусируемым, нужно присвоить ему атрибут tabindex; фреймворк делает это за вас, если вы укажете в свойствах компонента поле tabIndex. Свойство focusable отвечает за реакцию компонента на события фокусировки и на определённые внутренние механизмы, но не влияет на отображение в DOM. Именно поэтому вам и нужно было установить оба поля: focusable: true и tabIndex: 0, чтобы ваш компонент стал фокусируемым. Ну и на добавку, учитывайте что в IE DOM события focus/blur/focusin/focusout являются асинхронными. ;) |
Цитата:
Что значит асинхронные события? Неопределенность последовательности их появления? |
Ну как откуда узнал, на практике изучил. ;) Когда два года назад на меня повесили разработку Accessibility, фреймворк пришлось изрядно отрефакторить, чтобы управление фокусом и клавиатурная навигация вообще заработали.
Про "принципы работы" часто люди спрашивают, но сам вопрос мне не очень понятен. Фреймворк сделан для того, чтобы вы могли его использовать и получать (более/менее) одинаково работающие приложения во всех браузерах, которые мы поддерживаем. Есть API документация, есть tutorials, есть курсы. Изучайте и используйте. ;) Зачем вам знание каких-то глубинных вещей? Обычно оно ничем не помогает, только грузит ненужными деталями. Хотя мне и не жалко никогда, так что если есть конкретные вопросы, то спрашивайте. ;) Асинхронные это и значит, что асинхронные: события выстреливают не в том же цикле исполнения, что и собственно момент фокусирования. Возьмём вот такой код, для примера: Код:
Ext.onReady(function() {Код:
preКод:
pre |
спасибо!
бум юзать Правда в своем проекте отменил фокусировку. Оказывается мне нужна была selectable, чего в Ext JS нету. Пришлось самому писать миксин чтобы во всех компонентах появилась возможность выделения А так я эту фичу видел лишь в гридах. Почему то они не сделали эту фичу для всех компонент. |
Не совсем понятно, какое именно выделение вам нужно. В таблицах есть ячейки и строки, которые можно выделять. В обычных компонентах нет ни ячеек, ни колонок. В них и содержимого может не быть вовсе, кроме структурных элементов.
|
У меня есть компоненты, которые наследуются от штатного контейнера, которые нужно выделять, причем с возможностью группового выделения при нажатой Shift. Эти компоненты просто обычные графические примитивы: линии, кружки, квадраты и прочее. Также среди них есть примитив Группа, которая может внутри себя содержать другие примитивы (потому и потребовалось наследоваться от контейнера). В общем это по сути графический редактор. Причем я сделал так, что эти примитивы у меня выступают как виды со своими контролерами вида. Очень удобно!
|
| Часовой пояс GMT +3, время: 16:19. |