1

我在 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 像这样从网络上获取的。

用户键入“Delaw”，我的搜索功能检测到有一个名为 Delaware 的条目，它位于商店的第 3 位。

我要做的就是以编程方式突出显示行/条目“特拉华”，就像您单击它一样。

4

2 回答 2

0

这个 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

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

于 2017-08-02T15:24:46.383 回答
0

有两种方法可以解决问题

一种是遵循@devbnz 的答案，标记为正确。如果您只想以图形方式突出显示条目而不触发任何事件，则这是可取的。

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

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

根据情况，我最终使用了任何一个。

于 2017-08-03T11:15:37.653 回答