Sencha Documentation

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. Components can be retrieved by using their xtype 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.Panels in 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');
For easy access to queries based from a particular Container see the Ext.container.Container-query, Ext.container.Container-down and Ext.container.Container-child methods. Also see Ext.Component-up.
Defined By

Methods

 
query( component The, selector The) : Boolean
Tests whether the passed Component matches the selector string.
Tests whether the passed Component matches the selector string.

Parameters

  • The : component
    Component to test
  • The : selector
    selector string to test against.

Returns

  • Boolean   True if the Component matches the selector.