Extjs 6.0 - ItemSelector: how to programmatically focus/highlight an element?

Question

I have a ItemSelector component inside a Window. I have implemented a search functionality that dynamically finds the matching entry based on user's keyboard input.

Now I just want to highlight/focus such item inside the ItemSelector.

I'm looking for something like:

// 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
}

Example

Imagine a simple ItemSelector like this one taken from the web.

User types 'Delaw' and my search function detects that there is an entry with name Delaware and it's at position 3 in the store.

All I want to do is to programmatically highlight the row/entry 'Delaware' just as if you clicked on it.

Answer 1

This ux component uses a boundList, or better 2 of them. A from and a toList.

You need to get a reference to the right boundlist.

More on that you will find here: http://docs.sencha.com/extjs/6.0.1/classic/src/ItemSelector.js.html

Basically you can do something like this: https://fiddle.sencha.com/#view/editor&fiddle/24ec

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

After you have a ref to the correct boundlist, you can simply highlight the item using:

http://docs.sencha.com/extjs/6.0.1/classic/Ext.view.BoundList.html#method-highlightItem

Take care that you may need to call following function before:

http://docs.sencha.com/extjs/6.0.1/classic/Ext.view.BoundList.html#method-clearHighlight

To find the correct item should't be too hard.