Ext JS 4.0.7 Sencha Docs

Ext.ComponentQuery

Hierarchy

Ext.Base
Ext.ComponentQuery

Uses

Files

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
  • last

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.Container.query, Ext.container.Container.down and Ext.container.Container.child methods. Also see Ext.Component.up.

Available since: 4.0.0

Defined By

Properties

Available since: 4.0.0

Get the reference to the current class from which this object was instantiated. ...

Get the reference to the current class from which this object was instantiated. Unlike statics, this.self is scope-dependent and it's meant to be used for dynamic inheritance. See statics for a detailed comparison

Ext.define('My.Cat', {
    statics: {
        speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
    },

    constructor: function() {
        alert(this.self.speciesName); / dependent on 'this'

        return this;
    },

    clone: function() {
        return new this.self();
    }
});


Ext.define('My.SnowLeopard', {
    extend: 'My.Cat',
    statics: {
        speciesName: 'Snow Leopard'         // My.SnowLeopard.speciesName = 'Snow Leopard'
    }
});

var cat = new My.Cat();                     // alerts 'Cat'
var snowLeopard = new My.SnowLeopard();     // alerts 'Snow Leopard'

var clone = snowLeopard.clone();
alert(Ext.getClassName(clone));             // alerts 'My.SnowLeopard'

Available since: 4.0.0

Methods

Defined By

Instance methods

...

Available since: 4.0.6

Parameters

Returns

Call the original method that was previously overridden with override Ext.define('My.Cat', { constructor: functi...

Call the original method that was previously overridden with override

Ext.define('My.Cat', {
    constructor: function() {
        alert("I'm a cat!");

        return this;
    }
});

My.Cat.override({
    constructor: function() {
        alert("I'm going to be a cat!");

        var instance = this.callOverridden();

        alert("Meeeeoooowwww");

        return instance;
    }
});

var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                          // alerts "I'm a cat!"
                          // alerts "Meeeeoooowwww"

Available since: 4.0.0

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object

Returns

  • Object

    Returns the result after calling the overridden method

Call the parent's overridden method. ...

Call the parent's overridden method. For example:

Ext.define('My.own.A', {
    constructor: function(test) {
        alert(test);
    }
});

Ext.define('My.own.B', {
    extend: 'My.own.A',

    constructor: function(test) {
        alert(test);

        this.callParent([test + 1]);
    }
});

Ext.define('My.own.C', {
    extend: 'My.own.B',

    constructor: function() {
        alert("Going to call parent's overriden constructor...");

        this.callParent(arguments);
    }
});

var a = new My.own.A(1); // alerts '1'
var b = new My.own.B(1); // alerts '1', then alerts '2'
var c = new My.own.C(2); // alerts "Going to call parent's overriden constructor..."
                         // alerts '2', then alerts '3'

Available since: 4.0.0

Parameters

  • args : Array/Arguments

    The arguments, either an array or the arguments object from the current method, for example: this.callParent(arguments)

Returns

  • Object

    Returns the result from the superclass' method

( config ) : Objectchainableprotected
Initialize configuration for this class. ...

Initialize configuration for this class. a typical example:

Ext.define('My.awesome.Class', {
    // The default config
    config: {
        name: 'Awesome',
        isAwesome: true
    },

    constructor: function(config) {
        this.initConfig(config);

        return this;
    }
});

var awesome = new My.awesome.Class({
    name: 'Super Awesome'
});

alert(awesome.getName()); // 'Super Awesome'

Available since: 4.0.0

Parameters

Returns

  • Object

    mixins The mixin prototypes as key - value pairs

Fires

    Ext.ComponentQuery
    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: 4.0.1

    Parameters

    • component : Ext.Component

      The Component to test

    • selector : String

      The selector string to test against.

    Returns

    • Boolean

      True if the Component matches the selector.

    Fires

      ( name, cls )private
      Used internally by the mixins pre-processor ...

      Used internally by the mixins pre-processor

      Available since: 4.0.6

      Parameters

      Fires

        ( name, value )private
        ...

        Available since: 4.0.6

        Parameters

        Fires

          ( name, fn )private
          ...

          Available since: 4.0.0

          Parameters

          Ext.ComponentQuery
          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: 4.0.0

          Parameters

          • selector : String

            The selector string to filter returned Components

          • root : Ext.container.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.

          Returns

          Fires

            ( config ) : Ext.Basechainableprivate
            ...

            Available since: 4.0.0

            Parameters

            Returns

            Fires

              Get the reference to the class from which this object was instantiated. ...

              Get the reference to the class from which this object was instantiated. Note that unlike self, this.statics() is scope-independent and it always returns the class from which it was called, regardless of what this points to during run-time

              Ext.define('My.Cat', {
                  statics: {
                      totalCreated: 0,
                      speciesName: 'Cat' // My.Cat.speciesName = 'Cat'
                  },
              
                  constructor: function() {
                      var statics = this.statics();
              
                      alert(statics.speciesName);     // always equals to 'Cat' no matter what 'this' refers to
                                                      // equivalent to: My.Cat.speciesName
              
                      alert(this.self.speciesName);   // dependent on 'this'
              
                      statics.totalCreated++;
              
                      return this;
                  },
              
                  clone: function() {
                      var cloned = new this.self;                      // dependent on 'this'
              
                      cloned.groupName = this.statics().speciesName;   // equivalent to: My.Cat.speciesName
              
                      return cloned;
                  }
              });
              
              
              Ext.define('My.SnowLeopard', {
                  extend: 'My.Cat',
              
                  statics: {
                      speciesName: 'Snow Leopard'     // My.SnowLeopard.speciesName = 'Snow Leopard'
                  },
              
                  constructor: function() {
                      this.callParent();
                  }
              });
              
              var cat = new My.Cat();                 // alerts 'Cat', then alerts 'Cat'
              
              var snowLeopard = new My.SnowLeopard(); // alerts 'Cat', then alerts 'Snow Leopard'
              
              var clone = snowLeopard.clone();
              alert(Ext.getClassName(clone));         // alerts 'My.SnowLeopard'
              alert(clone.groupName);                 // alerts 'Cat'
              
              alert(My.Cat.totalCreated);             // alerts 3
              

              Available since: 4.0.0

              Returns

              Defined By

              Static methods

              ( members ) : Ext.Basechainablestatic
              Add / override static properties of this class. ...

              Add / override static properties of this class.

              Ext.define('My.cool.Class', {
                  ...
              });
              
              My.cool.Class.addStatics({
                  someProperty: 'someValue',      // My.cool.Class.someProperty = 'someValue'
                  method1: function() { ... },    // My.cool.Class.method1 = function() { ... };
                  method2: function() { ... }     // My.cool.Class.method2 = function() { ... };
              });
              

              Available since: 4.0.2

              Parameters

              Returns

              ( fromClass, members ) : Ext.Basechainablestatic
              Borrow another class' members to the prototype of this class. ...

              Borrow another class' members to the prototype of this class.

              Ext.define('Bank', {
                  money: '$$$',
                  printMoney: function() {
                      alert('$$$$$$$');
                  }
              });
              
              Ext.define('Thief', {
                  ...
              });
              
              Thief.borrow(Bank, ['money', 'printMoney']);
              
              var steve = new Thief();
              
              alert(steve.money); // alerts '$$$'
              steve.printMoney(); // alerts '$$$$$$$'
              

              Available since: 4.0.2

              Parameters

              • fromClass : Ext.Base

                The class to borrow members from

              • members : String/String[]

                The names of the members to borrow

              Returns

              Create a new instance of this Class. ...

              Create a new instance of this Class.

              Ext.define('My.cool.Class', {
                  ...
              });
              
              My.cool.Class.create({
                  someConfig: true
              });
              

              All parameters are passed to the constructor of the class.

              Available since: 4.0.2

              Returns

              ( alias, origin )static
              Create aliases for existing prototype methods. ...

              Create aliases for existing prototype methods. Example:

              Ext.define('My.cool.Class', {
                  method1: function() { ... },
                  method2: function() { ... }
              });
              
              var test = new My.cool.Class();
              
              My.cool.Class.createAlias({
                  method3: 'method1',
                  method4: 'method2'
              });
              
              test.method3(); // test.method1()
              
              My.cool.Class.createAlias('method5', 'method3');
              
              test.method5(); // test.method3() -> test.method1()
              

              Available since: 4.0.2

              Parameters

              Get the current class' name in string format. ...

              Get the current class' name in string format.

              Ext.define('My.cool.Class', {
                  constructor: function() {
                      alert(this.self.getName()); // alerts 'My.cool.Class'
                  }
              });
              
              My.cool.Class.getName(); // 'My.cool.Class'
              

              Available since: 4.0.4

              Returns

              Add methods / properties to the prototype of this class. ...

              Add methods / properties to the prototype of this class.

              Ext.define('My.awesome.Cat', {
                  constructor: function() {
                      ...
                  }
              });
              
               My.awesome.Cat.implement({
                   meow: function() {
                      alert('Meowww...');
                   }
               });
              
               var kitty = new My.awesome.Cat;
               kitty.meow();
              

              Available since: 4.0.2

              Parameters

              ( members ) : Ext.Basechainablestatic
              Override prototype members of this class. ...

              Override prototype members of this class. Overridden methods can be invoked via callOverridden

              Ext.define('My.Cat', {
                  constructor: function() {
                      alert("I'm a cat!");
              
                      return this;
                  }
              });
              
              My.Cat.override({
                  constructor: function() {
                      alert("I'm going to be a cat!");
              
                      var instance = this.callOverridden();
              
                      alert("Meeeeoooowwww");
              
                      return instance;
                  }
              });
              
              var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
                                        // alerts "I'm a cat!"
                                        // alerts "Meeeeoooowwww"
              

              Available since: 4.0.2

              Parameters

              Returns