Question

我搜索了示例和文档，但我无法找到是否可以在ComponentQuery查询中使用通配符。我喜欢这样做：

 Ext.ComponentQuery.query('button > menu > menuitem[text="Welcome*"]');

由于按钮文本将是当前用户名，例如“Welcome Shaun”。

Answer 1

尝试

Ext.ComponentQuery.query（'menuitem {text.search（\'Menu Item \'）！= - 1}'）;

根据文档，您可以使用自定义表达式。这适用于我在下面包含的代码：

var toolbar = Ext.widget('toolbar', {
        items   : [
            {
                xtype:'splitbutton',
                text: 'Menu Button',
                iconCls: 'add16',
                menu: [{text: 'Menu Item 1'},{text: 'Menu Item 2'}],
                reorderable: false
            },
            {
                xtype: 'button',
                text: 'Get matches',
                handler: function(){
                    var match = Ext.ComponentQuery.query('menuitem{text.search( \'Menu Item\' )!=-1}');
                    console.log( match )
                }
            }
        ]
    });

    Ext.widget('panel', {
        renderTo: Ext.getBody(),
        tbar    : toolbar,
        border  : true,
        width   : 600,
        height  : 400
    });

Answer 2

仅仅是为了完整性（并且因为会员表达式会导致查询崩溃）

正如@existdissolve所述，您可以使用 成员表达式 来存档类似（不同！）的通配符，就像您的情况一样< / p>

Ext.ComponentQuery.query('button > menu > menuitem{text.search("Welcome")!=-1}');

这将尝试对任何找到的menuitem的text属性执行本机JS搜索操作。无论这个属性是否存在（或方法）使我遇到成员表达式的主要问题

您需要了解的关于会员表达的内容

您几乎可以在每个选择器上使用成员表达式，但需要存在于该选择器上，或者您最终会遇到一个中止查询的异常（完全像例外）。

这是一个简单的例子。假设你想通过它的文本找到一个按钮。那应该没问题，所有按钮都需要文字，不是吗？这可以使用很长一段时间，直到您的客户抱怨某些按钮不需要文本，简单的图像就足够了。您已经忘记了查询事物并添加了按钮，突然部分应用程序停止工作，而您最终会遇到类似

的异常

未捕获的TypeError：无法调用未定义的方法“搜索”

您可以在 JSFiddle 示例中自行尝试。尝试“找到我”，然后点击“添加图片按钮”并再次尝试。

为什么会发生这种情况？ Ext.ComponentQuery测试既不存在属性，也不存在可能导致查询完全失败的表达式。

是的，上面的示例很简单，您可能会发现错误的来源非常快，但也可能完全不同。

现在怎么办？我不想说你不应该使用会员表达，但你真的需要关心你可能会产生的副作用面。

Answer 3

从ExtJS 5开始，引入了通过正则表达式进行匹配，使此任务更加清晰。 documentation提供了更多详细信息，但解决已发布问题的解决方案如下所示：

Ext.ComponentQuery.query('button > menu > menuitem[text/="^Welcome"]');

Ext ComponentQuery通配符

3 个答案: