CODEWITHSUNDEEP
extjsextjs6itemselector
Marko Pacak
Marko Pacak

Reputation: 13

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

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.

Upvotes: 1

Views: 1061

Answers (2)

Marko Pacak
Marko Pacak

Reputation: 13

There are two ways to solve the issue

One is by following @devbnz answer, marked as correct. This is preferable, if you just want to graphically highlight the entry without triggering any event.

However, by hovering on other entries, you will lose the highlight on your current entry.

The second one, as suggested by @guilherme-lopes in the comments, may be preferable in cases in which you want the selection to act as if you actually clicked on an entry, which will trigger the selectionchange event and similar...

Depending on the situation, I ended up using either.

Upvotes: 0

hwsw
hwsw

Reputation: 2606

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.

Upvotes: 0

Related Questions