Extjs 6.0 - ItemSelector：如何以编程方式 focus/highlight 一个元素？

Question

我在 Window 中有一个 ItemSelector 组件。我已经实现了一个搜索功能，可以根据用户的键盘输入动态找到匹配的条目。

现在我只想highlight/focus ItemSelector里面的这样的item。

我正在寻找类似的东西：

// 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，例如从网络上获取的 this one。

用户输入 'Delaw'，我的搜索功能检测到有一个名为 Delaware 的条目，它在商店中的位置 3。

我想做的就是以编程方式突出显示 row/entry 'Delaware' 就像您单击它一样。

Answer 1

这个用户体验组件使用了一个 boundList，或者更好的是其中的两个。一个 from 和一个 toList。

您需要获得对正确边界列表的引用。

您可以在这里找到更多相关信息：http://docs.sencha.com/extjs/6.0.1/classic/src/ItemSelector.js.html

基本上你可以这样做： 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);
                }

获得正确绑定列表的引用后，您可以使用以下方式简单地突出显示该项目：

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

注意之前可能需要调用以下函数：

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

找到正确的项目应该不会太难。

Answer 2

有两种方法可以解决问题

一种是按照@devbnz 的回答，标记为正确。如果您只想以图形方式 突出显示该条目而不触发任何事件，那么这是更可取的。

但是，如果将鼠标悬停在其他条目上，您将失去当前条目的突出显示。

第二个，正如@guilherme-lopes 在评论中所建议的那样，在您希望选择就像您实际单击条目一样的情况下可能更可取，这将触发 selectionchange 事件和类似...

根据情况，我最终使用了其中一种。

Extjs 6.0 - ItemSelector：如何以编程方式 focus/highlight 一个元素？

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

extjs

itemselector

extjs6