Question

我在Window中有一个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，如this one，取自网络。

用户类型＆＃39; Delaw＆＃39;并且我的搜索功能检测到存在名称为Delaware的条目，并且它位于商店的第3位。

我想要做的就是以编程方式突出显示行/条目＆＃39; Delaware＆＃39;就像你点击它一样。

Answer 1

这个ux组件使用boundList，或更好的2个。一个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：如何以编程方式聚焦/突出显示元素？

2 个答案: