-<!DOCTYPE html><html><head><title>Sencha Documentation Project</title><link rel="stylesheet" href="../reset.css" type="text/css"><link rel="stylesheet" href="../prettify.css" type="text/css"><link rel="stylesheet" href="../prettify_sa.css" type="text/css"><script type="text/javascript" src="../prettify.js"></script></head><body onload="prettyPrint()"><pre class="prettyprint"><pre><span id='Ext-ComponentQuery'>/**
+<!DOCTYPE html>
+<html>
+<head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>The source code</title>
+ <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
+ <script type="text/javascript" src="../prettify/prettify.js"></script>
+ <style type="text/css">
+ .highlight { display: block; background-color: #ddd; }
+ </style>
+ <script type="text/javascript">
+ function highlight() {
+ document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
+ }
+ </script>
+</head>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-ComponentQuery'>/**
</span> * @class Ext.ComponentQuery
* @extends Object
+ * @singleton
*
* 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 {@link Ext.Component xtype} with an optional . prefix
-<ul>
- <li>component or .component</li>
- <li>gridpanel or .gridpanel</li>
-</ul>
+ *
+ * - `component` or `.component`
+ * - `gridpanel` or `.gridpanel`
*
* An itemId or id must be prefixed with a #
-<ul>
- <li>#myContainer</li>
-</ul>
*
+ * - `#myContainer`
*
* Attributes must be wrapped in brackets
-<ul>
- <li>component[autoScroll]</li>
- <li>panel[title="Test"]</li>
-</ul>
*
- * Member expressions from candidate Components may be tested. If the expression returns a <i>truthy</i> value,
- * the candidate Component will be included in the query:<pre><code>
-var disabledFields = myFormPanel.query("{isDisabled()}");
-</code></pre>
+ * - `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 {@link Ext.DomQuery 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:
*
- * Pseudo classes may be used to filter results in the same way as in {@link Ext.DomQuery DomQuery}:<code><pre>
-// 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");
- }
-}
-</pre></code>
- * <p>
- * Default pseudos include:<br />
* - not
- * </p>
*
* Queries return an array of components.
* Here are some example queries.
-<pre><code>
- // 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');
-</code></pre>
-
-For easy access to queries based from a particular Container see the {@link Ext.container.Container#query},
-{@link Ext.container.Container#down} and {@link Ext.container.Container#child} methods. Also see
-{@link Ext.Component#up}.
- * @singleton
+ *
+ * // 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 {@link Ext.container.Container#query},
+ * {@link Ext.container.Container#down} and {@link Ext.container.Container#child} methods. Also see
+ * {@link Ext.Component#up}.
*/
Ext.define('Ext.ComponentQuery', {
singleton: true,
method: filterFnPattern
}];
-<span id='Ext-ComponentQuery.Query'> /**
+<span id='Ext-ComponentQuery-Query'> /**
</span> * @class Ext.ComponentQuery.Query
* @extends Object
* @private
Ext.apply(this, cfg);
},
-<span id='Ext-ComponentQuery.Query-method-execute'> /**
+<span id='Ext-ComponentQuery-Query-method-execute'> /**
</span> * @private
* Executes this Query upon the selected root.
* The root provides the initial source of candidate Component matches which are progressively
},
<span id='Ext-ComponentQuery-method-query'> /**
-</span> * <p>Returns an array of matched Components from within the passed root object.</p>
- * <p>This method filters returned Components in a similar way to how CSS selector based DOM
- * queries work using a textual selector string.</p>
- * <p>See class summary for details.</p>
- * @param selector The selector string to filter returned Components
- * @param root <p>The Container within which to perform the query. If omitted, all Components
- * within the document are included in the search.</p>
- * <p>This parameter may also be an array of Components to filter according to the selector.</p>
- * @returns {Array} The matched Components.
+</span> * 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.
+ *
+ * @param {String} selector The selector string to filter returned Components
+ * @param {Ext.container.Container} root 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.</p>
+ * @returns {[Ext.Component]} The matched Components.
+ *
* @member Ext.ComponentQuery
- * @method query
*/
query: function(selector, root) {
var selectors = selector.split(','),
return results;
},
-<span id='Ext-ComponentQuery-method-query'> /**
+<span id='Ext-ComponentQuery-method-is'> /**
</span> * Tests whether the passed Component matches the selector string.
- * @param component The Component to test
- * @param selector The selector string to test against.
+ * @param {Ext.Component} component The Component to test
+ * @param {String} selector The selector string to test against.
* @return {Boolean} True if the Component matches the selector.
* @member Ext.ComponentQuery
- * @method query
*/
is: function(component, selector) {
if (!selector) {
});
}
});
-});</pre></pre></body></html>
\ No newline at end of file
+});</pre>
+</body>
+</html>
git.ithinksw.org / extjs.git / blobdiff