Extjs 6.0-ItemSelector：如何以編程方式聚焦/突出顯示元素？

Question

我在窗口中有一個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。

我要做的就是以編程方式突出顯示行/條目“特拉華州”，就像您單擊它一樣。

Answer 1

該ux組件使用boundList或其中的2個更好。 一個從和一個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事件和類似事件。

---

根據具體情況，我最終還是使用了其中一種。