Extjs 6.0 - ItemSelector: как программно сфокусировать / выделить элемент?

Question

У меня есть компонент ItemSelector внутри окна. Я реализовал функцию поиска, которая динамически находит соответствующую запись на основе ввода с клавиатуры пользователя.

Теперь я просто хочу выделить / сфокусировать такой элемент внутри ItemSelector.

Я ищу что-то вроде:

// when the search returned a result and got the related index in the store
function onSearchPerformed(index) {
    var cmp = this;
    cmp.itemSelector.setSelected(index); // here I'd be highlighting the entry
}

пример

Представьте себе простой ItemSelector, подобный этому, взятому из Интернета.

Пользователь вводит "Delaw", и моя функция поиска обнаруживает, что есть запись с именем Delaware, и она находится на позиции 3 в магазине.

Все, что я хочу сделать, это программно выделить строку / запись "Делавэр" так, как будто вы нажали на нее.

Answer 1

Этот компонент UX использует boundList, или лучше 2 из них. От и список.

Вам нужно получить ссылку на правильный список.

Подробнее об этом вы найдете здесь: http://docs.sencha.com/extjs/6.0.1/classic/src/ItemSelector.js.html

В основном вы можете сделать что-то вроде этого: https://fiddle.sencha.com/

afterrender: function(cmp){
                    Ext.defer(function(){
                      var boundlist = cmp.down('boundlist');
                        item = boundlist.all.item(1);
                        boundlist.highlightItem(item);
                    },300);
                }

После того, как у вас есть ссылка на правильный список границ, вы можете просто выделить элемент, используя:

http://docs.sencha.com/extjs/6.0.1/classic/Ext.view.BoundList.html

Позаботьтесь, чтобы вам, возможно, понадобилось вызвать следующую функцию перед:

http://docs.sencha.com/extjs/6.0.1/classic/Ext.view.BoundList.html

Найти правильный предмет не должно быть слишком сложно.

Answer 2

Есть два способа решить проблему

---

Один из них - следующий ответ @devbnz, помеченный как правильный. Это предпочтительно, если вы просто хотите графически выделить запись без запуска какого-либо события.

Однако при наведении указателя мыши на другие записи вы потеряете выделение текущей записи.

---

Второй вариант, предложенный @ guilherme-lopes в комментариях, может быть предпочтительным в тех случаях, когда вы хотите, чтобы выборка действовала так, как если бы вы действительно щелкнули по записи, что вызовет selectionchange событие и тому подобное...

---

В зависимости от ситуации, я в конечном итоге использовал либо.