For up to date documentation and features, visit http://docs.sencha.com/ext-js/4-0

## Sencha Documentation

# Ext.ComponentQuery

Provides searching of Components within Ext.ComponentManager (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

Ext.ComponentQuery
view source
query( Object component, Object selector) : Boolean

Tests whether the passed Component matches the selector string.

Tests whether the passed Component matches the selector string.

### Parameters

- component : Object

  The Component to test

- selector : Object

  The selector string to test against.

### Returns

- Boolean

  True if the Component matches the selector.