Touch 2.2.0 Sencha Docs




Provides searching of Components within Ext.ComponentManager (globally) or a specific Ext.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()) {
    return result;

var invalidFields = myFormPanel.query('field:invalid');
if (invalidFields.length) {
    for (var i = 0, l = invalidFields.length; i < l; i++) {

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 grids and trees
var gridsAndTrees = Ext.ComponentQuery.query('gridpanel, treepanel');

For easy access to queries based from a particular Container see the Ext.Container.query, Ext.Container.down and Ext.Container.child methods. Also see Ext.Component.up.

Available since: 1.1.0

Defined By


view source
( root )private
Executes this Query upon the selected root. ...

Executes this Query upon the selected root. The root provides the initial source of candidate Component matches which are progressively filtered by iterating through this Query's operations cache. If no root is provided, all registered Components are searched via the ComponentManager. root may be a Container who's descendant Components are filtered root may be a Component with an implementation of getRefItems which provides some nested Components such as the docked items within a Panel. root may be an array of candidate Components to filter using this Query.

Available since: 2.0.0


view source
( component, selector ) : Boolean
Tests whether the passed Component matches the selector string. ...

Tests whether the passed Component matches the selector string.

Available since: 2.0.0


  • component : Ext.Component

    The Component to test.

  • selector : String

    The selector string to test against.


  • Boolean

    true if the Component matches the selector.


    view source
    ( selector, root ) : Ext.Component[]
    Returns an array of matched Components from within the passed root object. ...

    Returns an array of matched Components from within the passed root object.

    This method filters returned Components in a similar way to how CSS selector based DOM queries work using a textual selector string.

    See class summary for details.

    Available since: 2.0.0


    • selector : String

      The selector string to filter returned Components

    • root : Ext.Container

      The Container within which to perform the query. If omitted, all Components within the document are included in the search.

      This parameter may also be an array of Components to filter according to the selector.