Clear Up
SharpKit Reference

ComponentQuery Class

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

  • component
  • gridpanel

Matching by xtype matches inherited types, so in the following code, the previous field of any type which inherits from TextField will be found:

  
prevField = myField.previousNode('textfield');
            

To match only the exact type, pass the "shallow" flag (See AbstractComponent's isXType method)

  
prevTextField = myField.previousNode('textfield(true)');
            

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
  • first
  • 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.

Namespace: Ext

Base Types

Methods

Name Description
callOverridden(object) Call the original method that was previously overridden with override
  Ext.define('My.Cat', {
            constructor: function() {
            alert("I'm a cat!");
            }
            });
            My.Cat.override({
            constructor: function() {
            alert("I'm going to be a cat!");
            this.callOverridden();
            alert("Meeeeoooowwww");
            }
            });
            var kitty = new My.Cat(); // alerts "I'm going to be a cat!"
            // alerts "I'm a cat!"
            // alerts "Meeeeoooowwww"
            

This method has been deprecated

as of 4.1. Use callParent instead.

callParent(object) Call the "parent" method of the current method. That is the method previously overridden by derivation or by an override (see Ext.define).
  Ext.define('My.Base', {
            constructor: function (x) {
            this.x = x;
            },
            statics: {
            method: function (x) {
            return x;
            }
            }
            });
            Ext.define('My.Derived', {
            extend: 'My.Base',
            constructor: function () {
            this.callParent([21]);
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // alerts 21
            
This can be used with an override as follows:
  Ext.define('My.DerivedOverride', {
            override: 'My.Derived',
            constructor: function (x) {
            this.callParent([x*2]); // calls original My.Derived constructor
            }
            });
            var obj = new My.Derived();
            alert(obj.x);  // now alerts 42
            
This also works with static methods.
  Ext.define('My.Derived2', {
            extend: 'My.Base',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Base.method
            }
            }
            });
            alert(My.Base.method(10);     // alerts 10
            alert(My.Derived2.method(10); // alerts 20
            
Lastly, it also works with overridden static methods.
  Ext.define('My.Derived2Override', {
            override: 'My.Derived2',
            statics: {
            method: function (x) {
            return this.callParent([x*2]); // calls My.Derived2.method
            }
            }
            });
            alert(My.Derived2.method(10); // now alerts 40
            
getInitialConfig(object) Returns the initial configuration passed to constructor when instantiating this class.
initConfig(object) 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);
            }
            });
            var awesome = new My.awesome.Class({
            name: 'Super Awesome'
            });
            alert(awesome.getName()); // 'Super Awesome'
            
is(Component, JsString) Tests whether the passed Component matches the selector string.
query(JsString, object)
statics() 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++;
            },
            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
            
© Copyright 2005-2011 SharpKit. All rights reserved.