ExtJS Component Query

Question

I am looking to use the component query function to find components not by attribute value, but by attribute name where the attribute name itself should be a wildcard.

So I have a component with the following config:

var component = Ext.create({
  xtype: 'container',
  foobar: 'something',
  foobar2: 'something else'
});

I want to be able to do find all elements that have the attribute starting with foobar. Something like

var els = Ext.ComponentQuery.query('[foobar*]');

How would I go about achieving that? Is this an option?

Answer 1

I didn't find a default way in the documentation. What would a possible solution is a custom matcher function that checks each component for properties that start with given parameter. You could then make an override for all ext components to have this matcher function. (If you're already using custom components you could make a mixin)

For Example:

    Ext.override(Ext.Component, {
        insensetivePropQuery: function(prop) {
            var matched = false;

            Ext.Object.each(this, function(key, value, myself) {
                if(Ext.String.startsWith(key, prop) === true) {
                    matched = true;
                    return false;
                }
            });
            return matched;
        }
    });

Query example:

Ext.ComponentQuery.query('{insensetivePropQuery("foobar")}');

Here is a working sencha fiddle example (using ExtJS 7.3.x Material): example