Upgrade to ExtJS 4.0.7 - Released 10/19/2011
[extjs.git] / docs / source / CompositeElement.html
index d399b42..f4812c1 100644 (file)
-<html>\r
-<head>\r
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    \r
-  <title>The source code</title>\r
-    <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
-    <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
-</head>\r
-<body  onload="prettyPrint();">\r
-    <pre class="prettyprint lang-js"><div id="cls-Ext.CompositeElement"></div>/**\r
- * @class Ext.CompositeElement\r
- * @extends Ext.CompositeElementLite\r
- * <p>This class encapsulates a <i>collection</i> of DOM elements, providing methods to filter\r
- * members, or to perform collective actions upon the whole set.</p>\r
- * <p>Although they are not listed, this class supports all of the methods of {@link Ext.Element} and\r
- * {@link Ext.Fx}. The methods from these classes will be performed on all the elements in this collection.</p>\r
- * <p>All methods return <i>this</i> and can be chained.</p>\r
- * Usage:\r
-<pre><code>\r
-var els = Ext.select("#some-el div.some-class", true);\r
-// or select directly from an existing element\r
-var el = Ext.get('some-el');\r
-el.select('div.some-class', true);\r
-\r
-els.setWidth(100); // all elements become 100 width\r
-els.hide(true); // all elements fade out and hide\r
-// or\r
-els.setWidth(100).hide(true);\r
-</code></pre>\r
- */\r
-Ext.CompositeElement = function(els, root){\r
-    this.elements = [];\r
-    this.add(els, root);\r
-};\r
-\r
-Ext.extend(Ext.CompositeElement, Ext.CompositeElementLite, {\r
-    \r
-    // private\r
-    getElement : function(el){\r
-        // In this case just return it, since we already have a reference to it\r
-        return el;\r
-    },\r
-    \r
-    // private\r
-    transformElement : function(el){\r
-        return Ext.get(el);\r
-    }\r
-\r
-    /**\r
-    * Adds elements to this composite.\r
-    * @param {String/Array} els A string CSS selector, an array of elements or an element\r
-    * @return {CompositeElement} this\r
-    */\r
-\r
-    /**\r
-     * Returns the Element object at the specified index\r
-     * @param {Number} index\r
-     * @return {Ext.Element}\r
-     */\r
-\r
-    <div id="method-Ext.CompositeElement-"></div>/**\r
-     * Iterates each <code>element</code> in this <code>composite</code>\r
-     * calling the supplied function using {@link Ext#each}.\r
-     * @param {Function} fn The function to be called with each\r
-     * <code>element</code>. If the supplied function returns <tt>false</tt>,\r
-     * iteration stops. This function is called with the following arguments:\r
-     * <div class="mdetail-params"><ul>\r
-     * <li><code>element</code> : <i>Ext.Element</i><div class="sub-desc">The element at the current <code>index</code>\r
-     * in the <code>composite</code></div></li>\r
-     * <li><code>composite</code> : <i>Object</i> <div class="sub-desc">This composite.</div></li>\r
-     * <li><code>index</code> : <i>Number</i> <div class="sub-desc">The current index within the <code>composite</code> </div></li>\r
-     * </ul></div>\r
-     * @param {Object} scope (optional) The scope (<code><this</code> reference) in which the specified function is executed.\r
-     * Defaults to the <code>element</code> at the current <code>index</code>\r
-     * within the composite.\r
-     * @return {CompositeElement} this\r
-     */\r
-});\r
-\r
-/**\r
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
- * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
- * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
- * @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
- * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
- * @return {CompositeElementLite/CompositeElement}\r
- * @member Ext.Element\r
- * @method select\r
- */\r
-Ext.Element.select = function(selector, unique, root){\r
-    var els;\r
-    if(typeof selector == "string"){\r
-        els = Ext.Element.selectorFunction(selector, root);\r
-    }else if(selector.length !== undefined){\r
-        els = selector;\r
-    }else{\r
-        throw "Invalid selector";\r
-    }\r
-\r
-    return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);\r
-};\r
-\r
-<div id="method-Ext.Element-select"></div>/**\r
- * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods\r
- * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or\r
- * {@link Ext.CompositeElementLite CompositeElementLite} object.\r
- * @param {String/Array} selector The CSS selector or an array of elements\r
- * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)\r
- * @param {HTMLElement/String} root (optional) The root element of the query or id of the root\r
- * @return {CompositeElementLite/CompositeElement}\r
- * @member Ext.Element\r
- * @method select\r
- */\r
-Ext.select = Ext.Element.select;</pre>    \r
-</body>\r
-</html>
\ No newline at end of file
+<!DOCTYPE html>
+<html>
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+  <title>The source code</title>
+  <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
+  <script type="text/javascript" src="../resources/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-fx-target-CompositeElement'>/**
+</span> * @class Ext.fx.target.CompositeElement
+ * @extends Ext.fx.target.Element
+ * 
+ * This class represents a animation target for a {@link Ext.CompositeElement}. It allows
+ * each {@link Ext.Element} in the group to be animated as a whole. In general this class will not be
+ * created directly, the {@link Ext.CompositeElement} will be passed to the animation and
+ * and the appropriate target will be created.
+ */
+Ext.define('Ext.fx.target.CompositeElement', {
+
+    /* Begin Definitions */
+
+    extend: 'Ext.fx.target.Element',
+
+    /* End Definitions */
+
+    isComposite: true,
+    
+    constructor: function(target) {
+        target.id = target.id || Ext.id(null, 'ext-composite-');
+        this.callParent([target]);
+    },
+
+    getAttr: function(attr, val) {
+        var out = [],
+            target = this.target;
+        target.each(function(el) {
+            out.push([el, this.getElVal(el, attr, val)]);
+        }, this);
+        return out;
+    }
+});
+</pre>
+</body>
+</html>