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.
+