Ext ComponentQuery wildcards

Question

I've searched the examples and docs and I couldn't find if its possible to use wildcards in the ComponentQuery query. Id like to do the following:

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

Since the button text will be the current user name for example "Welcome Shaun".

Answer 1

Try

Ext.ComponentQuery.query('menuitem{text.search( \'Menu Item\' )!=-1}');

Per the docs, you can use custom expressions. This works for the code I've included below:

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

Just for the sake of completeness (and because Member Expressions can crash the query)

As @existdissolve stated you can archive something similar (not the same!) of a wildcard with the use of a Member Expression like in your case

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

This will try to perform the native JS search operation on the text property of any found menuitem. No matter if this property exist (or the method) which brings me to the main issue of Member Expressions

What you need to know about Member Expressions

You can use a Member Expressions on nearly every selector but they need to exist on that selector or you end up with a exception which aborts the query (totally, like a exception does).

Here's a simple example. Let's say you want to find a button by it's text. That should be no problem, all buttons need a text, didn't they? This works for quite a time till your customer complains that some buttons don't need text a simple image would be enough. You have forgotten about the query thing and add the button and suddenly parts of your application stop working while you end up with a exception like

Uncaught TypeError: Cannot call method 'search' of undefined

You can try it yourself in this JSFiddle example. Try 'find me' and after that hit the 'add image button' and try it again.

Why does this happen? The Ext.ComponentQuery test neither if property exist nor if the expression exist which can quickly lead to a total fail of the query.

Yes, the example above is simple and you may find the source of the error real quick but it can also be completely different.

What now? I don't want to say to say that you should not use a Member Expression but you really need to care about the side effects that you may face.

Answer 3

Starting with ExtJS 5 functionality was introduced that makes this task much cleaner by allowing matching via regular expressions. The documentation provides further detail, but a solution that solves the posted question would look like this:

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