Ext ComponentQuery 通配符答案

【问题标题】：Ext ComponentQuery wildcardsExt ComponentQuery 通配符
【发布时间】：2013-01-24 17:29:00
【问题描述】：

我搜索了示例和文档，但找不到是否可以在 ComponentQuery 查询中使用通配符。我想做以下事情：

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

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

【问题讨论】：

标签： extjs extjs4 extjs4.1 extjs4.2

【解决方案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
    });

【讨论】：

没有记录，这是猜测吗？ docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
@JuanMendes 记录在案，因为他使用成员表达式以及本机 string.search 方法。成员表达式的示例不是最好的，因为没有明确说明您可以将成员函数应用于选择器，以便它只能在该选择器上运行。
@JuanMendes 顺便说一句。 The example for Member expressions is not the best...我指的是API的例子！
@sra existsdissolve 改变了他的答案，它曾经包含一个 ^= 运算符

【解决方案2】：

只是为了完整性（并且因为成员表达式可能会使查询崩溃）

正如@existdissolve 所说，您可以使用 成员表达式 来归档类似（不一样！）通配符的内容，就像您的情况一样

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

这将尝试对任何找到的菜单项的 text 属性执行本机 JS 搜索操作。不管这个属性是否存在（或方法），这让我想到了成员表达式的主要问题

您需要了解的有关成员表达式的知识

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

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

未捕获的类型错误：无法调用未定义的方法“搜索”

您可以在这个 JSFiddle 示例中自己尝试。尝试“找到我”，然后点击“添加图像按钮”，然后再试一次。

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

是的，上面的例子很简单，你可能很快就能找到错误的根源，但也可能完全不同。

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

【讨论】：

同意。在原始问题的情况下，我可能会选择在正在使用的菜单项类型上放置一个唯一名称（不管文本的可变性），然后在更“标准”的组件查询中简单地使用该名称.
@existdissolve 不要误会我的意思。在我对您的回答的评论中，我指的是 API 而不是您的回答。我想我说得不够清楚。你的回答是绝对正确的。通过我的补充，我只想指出Member Expressions 的缺点
谢谢我想避免将 ID 分配给我的组件，而只使用生成的 ID。但在这种情况下，我想我会这样做，而你就像@existdissolve 指出的那样简单查询。
您可以为所有相同类型的菜单项添加一个额外的类，而不是分配一个 id，并在选择器中使用它。
@theboulderer 或者您喜欢的任何属性名称。例如itemId:ButtonABC，ExtJS 或任何其他类似action:'start' 都支持它

【解决方案3】：

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

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

【讨论】：