Ext.ComponentQuery

Overview

Provides searching of Components within Ext.ComponentMgr (globally) or a specific Ext.container.Container on the document with a similar syntax to a CSS selector. Xtypes can be retrieved by their name with an optional . prefix

component or .component
gridpanel or .gridpanel

An itemId or id must be prefixed with a #.

#myContainer

Attributes must be wrapped in brackets

component[autoScroll]
panel[title="Test"]

Member expressions from candidate Components may be tested. If the expression returns a truthy value, the candidate Component will be included in the query:

var disabledFields = myFormPanel.query("{isDisabled()}");

Pseudo classes may be used to filter results in the same way as in DomQuery:

// Function receives array and returns a filtered array.
Ext.ComponentQuery.pseudos.invalid = function(items) {
    var i = 0, l = items.length, c, result = [];
    for (; i < l; i++) {
        if (!(c = items[i]).isValid()) {
            result.push(c);
        }
    }
    return result;
};

var invalidFields = myFormPanel.query('field:invalid');
if (invalidFields.length) {
    invalidFields[0].getEl().scrollIntoView(myFormPanel.body);
    for (var i = 0, l = invalidFields.length; i < l; i++) {
        invalidFields[i].getEl().frame("red");
    }
}

Default pseudos include:
- not

Queries return an array of components. Here are some example queries.

// retrieve all Ext.Panel's on the document by xtype
    var panelsArray = Ext.ComponentQuery.query('.panel');

    // retrieve all Ext.Panels within the container with an id myCt
    var panelsWithinmyCt = Ext.ComponentQuery.query('#myCt .panel');

    // retrieve all direct children which are Ext.Panels within myCt
    var directChildPanel = Ext.ComponentQuery.query('#myCt > .panel');

    // retrieve all gridpanels and listviews
    var gridsAndLists = Ext.ComponentQuery.query('gridpanel, listview');

Sencha Documentation

Ext.ComponentQuery