ExtJS中的高级选择器

Question

我在jQuery中有以下代码，当您在文本字段（#searchServices）中输入文本时，它将淡出不包含该文本的链接，并且会在包含文本的链接中淡出。

如何在 ExtJS 中执行此操作？

$('#searchServices').keyup(function () {
    if ($(this).val().trim() != '') {
        $('.serviceGridItem:not(:contains("' + $(this).val() + '"))').fadeOut();
        $('.serviceGridItem:contains("' + $(this).val() + '")').fadeIn();
    }
    else {
        $('.serviceGridItem').fadeIn();
    }
})

现在，我有我的文本字段和我的听众，如下所示：

xtype: 'textfield',
enableKeyEvents: true,
listeners: {
    keyup: function(c) {
        console.log(c.getValue());
    }
}

我的（生成的）html是这样的：

<div class="x-component x-window-item x-component-default" id="dataview-1049" tabindex="-1" style="">
    <a href="#" class="serviceGridItem">Legal Compliance</a>
    <a href="#" class="serviceGridItem">Departure Package</a>
    <a href="#" class="serviceGridItem">House Search</a>
    <a href="#" class="serviceGridItem">Language Training</a>
</div>

编辑：我已经尝试过这个，但我得到错误，说"意外的标识符"。

Ext.query('.serviceGridItem:not(:contains("' + c.getValue() + '"))').hide();

Answer 1

尝试使用 Ext.dom.Query.select 代替。

例如。。。

var dom = Ext.dom.Query.select('.serviceGridItem');
for(var i=0;i<dom.length;i++){
    var el = Ext.get(dom[i]);
    if(el.dom.outerText.indexOf("Legal") != -1){
        el.hide();
    }
}

这个应该隐藏其值中包含"合法"的那个