4

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

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

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

4

3 回答 3

4

尝试

Ext.ComponentQuery.query('menuitem{text.search(\'菜单项\')!=-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
    });
于 2013-01-24T18:31:51.837 回答
3

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

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

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

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

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

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

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

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

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

为什么会这样？该Ext.ComponentQuery测试既不存在属性也不存在表达式，这会很快导致查询完全失败。

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

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

于 2013-01-25T08:20:59.240 回答
0

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

Ext.ComponentQuery.query('button > menu > menuitem[text/="^Welcome"]');
于 2016-11-10T19:11:20.307 回答