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
An itemId or id must be prefixed with a #
Attributes must be wrapped in brackets
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.