ComponentQuery Instance Elements

Question

I searched for examples and documents, and I could not find out if wildcards could be used in a ComponentQuery query. I'd like to do the following:

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

Since the button text will be the current username, for example "Welcome Shaun".

Answer 1

Try

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

In documents, you can use custom expressions. This works for the code I provided 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

For completeness only (and because Member Expressions may cause the request to fail)

As @existdissolve stated that you can archive something like this (not the same thing!) As a wildcard using the Member Expression expression in your case

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

This will attempt to perform its own JS lookup operation in the text property of any menu item found. Regardless of whether this property (or method) exists that leads me to the main problem of member expressions

What you need to know about Member expressions

You can use member expressions for almost every selector, but they need to exist in that selector, or you will get an exception that interrupts the request (completely, as the exception does).

Here is a simple example. Let's say you want to find text on it. This should not be a problem, all buttons need text, right? This works for quite some time, until your client complains that some buttons do not need text, a simple image is enough. You forgot about the request and added a button, and suddenly parts of your application stopped working while you ended up with an exception, for example

Uncaught TypeError: Unable to call the search method undefined

You can try it yourself in this JSFiddle . Try "find me" and then click the "add image" button and try again.

Why is this happening? The Ext.ComponentQuery test Ext.ComponentQuery if the property exists and an expression does not exist that can quickly lead to a general request failure.

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

Now what? I do not mean to say that you should not use the expression Member, but you really need to take care of those side effects that you may encounter.

Answer 3

Beginning with ExtJS 5 functionality, a function has been introduced that makes this task cleaner, allowing it to be matched using regular expressions. The documentation contains additional information, but the solution to the posted question will look like this:

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