docs/source/CompositeElementLite.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   5   <title>The source code</title>
   6   <link href="../prettify/prettify.css" type="text/css" rel="stylesheet" />
   7   <script type="text/javascript" src="../prettify/prettify.js"></script>
   8   <style type="text/css">
   9     .highlight { display: block; background-color: #ddd; }
  10   </style>
  11   <script type="text/javascript">
  12     function highlight() {
  13       document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14     }
  15   </script>
  16 </head>
  17 <body onload="prettyPrint(); highlight();">
  18   <pre class="prettyprint lang-js"><span id='Ext-CompositeElementLite'>/**
  19 </span> * @class Ext.CompositeElementLite
  20  * &lt;p&gt;This class encapsulates a &lt;i&gt;collection&lt;/i&gt; of DOM elements, providing methods to filter
  21  * members, or to perform collective actions upon the whole set.&lt;/p&gt;
  22  * &lt;p&gt;Although they are not listed, this class supports all of the methods of {@link Ext.core.Element} and
  23  * {@link Ext.fx.Anim}. The methods from these classes will be performed on all the elements in this collection.&lt;/p&gt;
  24  * Example:&lt;pre&gt;&lt;code&gt;
  25 var els = Ext.select(&quot;#some-el div.some-class&quot;);
  26 // or select directly from an existing element
  27 var el = Ext.get('some-el');
  28 el.select('div.some-class');
  29
  30 els.setWidth(100); // all elements become 100 width
  31 els.hide(true); // all elements fade out and hide
  32 // or
  33 els.setWidth(100).hide(true);
  34 &lt;/code&gt;&lt;/pre&gt;
  35  */
  36 Ext.CompositeElementLite = function(els, root){
  37 <span id='Ext-CompositeElementLite-property-elements'>    /**
  38 </span>     * &lt;p&gt;The Array of DOM elements which this CompositeElement encapsulates. Read-only.&lt;/p&gt;
  39      * &lt;p&gt;This will not &lt;i&gt;usually&lt;/i&gt; be accessed in developers' code, but developers wishing
  40      * to augment the capabilities of the CompositeElementLite class may use it when adding
  41      * methods to the class.&lt;/p&gt;
  42      * &lt;p&gt;For example to add the &lt;code&gt;nextAll&lt;/code&gt; method to the class to &lt;b&gt;add&lt;/b&gt; all
  43      * following siblings of selected elements, the code would be&lt;/p&gt;&lt;code&gt;&lt;pre&gt;
  44 Ext.override(Ext.CompositeElementLite, {
  45     nextAll: function() {
  46         var els = this.elements, i, l = els.length, n, r = [], ri = -1;
  47
  48 //      Loop through all elements in this Composite, accumulating
  49 //      an Array of all siblings.
  50         for (i = 0; i &lt; l; i++) {
  51             for (n = els[i].nextSibling; n; n = n.nextSibling) {
  52                 r[++ri] = n;
  53             }
  54         }
  55
  56 //      Add all found siblings to this Composite
  57         return this.add(r);
  58     }
  59 });&lt;/pre&gt;&lt;/code&gt;
  60      * @type Array
  61      * @property elements
  62      */
  63     this.elements = [];
  64     this.add(els, root);
  65     this.el = new Ext.core.Element.Flyweight();
  66 };
  67
  68 Ext.CompositeElementLite.prototype = {
  69     isComposite: true,
  70
  71     // private
  72     getElement : function(el){
  73         // Set the shared flyweight dom property to the current element
  74         var e = this.el;
  75         e.dom = el;
  76         e.id = el.id;
  77         return e;
  78     },
  79
  80     // private
  81     transformElement : function(el){
  82         return Ext.getDom(el);
  83     },
  84
  85 <span id='Ext-CompositeElementLite-method-getCount'>    /**
  86 </span>     * Returns the number of elements in this Composite.
  87      * @return Number
  88      */
  89     getCount : function(){
  90         return this.elements.length;
  91     },
  92 <span id='Ext-CompositeElementLite-method-add'>    /**
  93 </span>     * Adds elements to this Composite object.
  94      * @param {Mixed} els Either an Array of DOM elements to add, or another Composite object who's elements should be added.
  95      * @return {CompositeElement} This Composite object.
  96      */
  97     add : function(els, root){
  98         var me = this,
  99             elements = me.elements;
 100         if(!els){
 101             return this;
 102         }
 103         if(typeof els == &quot;string&quot;){
 104             els = Ext.core.Element.selectorFunction(els, root);
 105         }else if(els.isComposite){
 106             els = els.elements;
 107         }else if(!Ext.isIterable(els)){
 108             els = [els];
 109         }
 110
 111         for(var i = 0, len = els.length; i &lt; len; ++i){
 112             elements.push(me.transformElement(els[i]));
 113         }
 114         return me;
 115     },
 116
 117     invoke : function(fn, args){
 118         var me = this,
 119             els = me.elements,
 120             len = els.length,
 121             e,
 122             i;
 123
 124         for(i = 0; i &lt; len; i++) {
 125             e = els[i];
 126             if(e){
 127                 Ext.core.Element.prototype[fn].apply(me.getElement(e), args);
 128             }
 129         }
 130         return me;
 131     },
 132 <span id='Ext-CompositeElementLite-method-item'>    /**
 133 </span>     * Returns a flyweight Element of the dom element object at the specified index
 134      * @param {Number} index
 135      * @return {Ext.core.Element}
 136      */
 137     item : function(index){
 138         var me = this,
 139             el = me.elements[index],
 140             out = null;
 141
 142         if(el){
 143             out = me.getElement(el);
 144         }
 145         return out;
 146     },
 147
 148     // fixes scope with flyweight
 149     addListener : function(eventName, handler, scope, opt){
 150         var els = this.elements,
 151             len = els.length,
 152             i, e;
 153
 154         for(i = 0; i&lt;len; i++) {
 155             e = els[i];
 156             if(e) {
 157                 Ext.EventManager.on(e, eventName, handler, scope || e, opt);
 158             }
 159         }
 160         return this;
 161     },
 162 <span id='Ext-CompositeElementLite-method-each'>    /**
 163 </span>     * &lt;p&gt;Calls the passed function for each element in this composite.&lt;/p&gt;
 164      * @param {Function} fn The function to call. The function is passed the following parameters:&lt;ul&gt;
 165      * &lt;li&gt;&lt;b&gt;el&lt;/b&gt; : Element&lt;div class=&quot;sub-desc&quot;&gt;The current Element in the iteration.
 166      * &lt;b&gt;This is the flyweight (shared) Ext.core.Element instance, so if you require a
 167      * a reference to the dom node, use el.dom.&lt;/b&gt;&lt;/div&gt;&lt;/li&gt;
 168      * &lt;li&gt;&lt;b&gt;c&lt;/b&gt; : Composite&lt;div class=&quot;sub-desc&quot;&gt;This Composite object.&lt;/div&gt;&lt;/li&gt;
 169      * &lt;li&gt;&lt;b&gt;idx&lt;/b&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The zero-based index in the iteration.&lt;/div&gt;&lt;/li&gt;
 170      * &lt;/ul&gt;
 171      * @param {Object} scope (optional) The scope (&lt;i&gt;this&lt;/i&gt; reference) in which the function is executed. (defaults to the Element)
 172      * @return {CompositeElement} this
 173      */
 174     each : function(fn, scope){
 175         var me = this,
 176             els = me.elements,
 177             len = els.length,
 178             i, e;
 179
 180         for(i = 0; i&lt;len; i++) {
 181             e = els[i];
 182             if(e){
 183                 e = this.getElement(e);
 184                 if(fn.call(scope || e, e, me, i) === false){
 185                     break;
 186                 }
 187             }
 188         }
 189         return me;
 190     },
 191
 192 <span id='Ext-CompositeElementLite-method-fill'>    /**
 193 </span>    * Clears this Composite and adds the elements passed.
 194     * @param {Mixed} els Either an array of DOM elements, or another Composite from which to fill this Composite.
 195     * @return {CompositeElement} this
 196     */
 197     fill : function(els){
 198         var me = this;
 199         me.elements = [];
 200         me.add(els);
 201         return me;
 202     },
 203
 204 <span id='Ext-CompositeElementLite-method-filter'>    /**
 205 </span>     * Filters this composite to only elements that match the passed selector.
 206      * @param {String/Function} selector A string CSS selector or a comparison function.
 207      * The comparison function will be called with the following arguments:&lt;ul&gt;
 208      * &lt;li&gt;&lt;code&gt;el&lt;/code&gt; : Ext.core.Element&lt;div class=&quot;sub-desc&quot;&gt;The current DOM element.&lt;/div&gt;&lt;/li&gt;
 209      * &lt;li&gt;&lt;code&gt;index&lt;/code&gt; : Number&lt;div class=&quot;sub-desc&quot;&gt;The current index within the collection.&lt;/div&gt;&lt;/li&gt;
 210      * &lt;/ul&gt;
 211      * @return {CompositeElement} this
 212      */
 213     filter : function(selector){
 214         var els = [],
 215             me = this,
 216             fn = Ext.isFunction(selector) ? selector
 217                 : function(el){
 218                     return el.is(selector);
 219                 };
 220
 221         me.each(function(el, self, i) {
 222             if (fn(el, i) !== false) {
 223                 els[els.length] = me.transformElement(el);
 224             }
 225         });
 226
 227         me.elements = els;
 228         return me;
 229     },
 230
 231 <span id='Ext-CompositeElementLite-method-indexOf'>    /**
 232 </span>     * Find the index of the passed element within the composite collection.
 233      * @param el {Mixed} The id of an element, or an Ext.core.Element, or an HtmlElement to find within the composite collection.
 234      * @return Number The index of the passed Ext.core.Element in the composite collection, or -1 if not found.
 235      */
 236     indexOf : function(el){
 237         return Ext.Array.indexOf(this.elements, this.transformElement(el));
 238     },
 239
 240 <span id='Ext-CompositeElementLite-method-replaceElement'>    /**
 241 </span>    * Replaces the specified element with the passed element.
 242     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
 243     * to replace.
 244     * @param {Mixed} replacement The id of an element or the Element itself.
 245     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
 246     * @return {CompositeElement} this
 247     */
 248     replaceElement : function(el, replacement, domReplace){
 249         var index = !isNaN(el) ? el : this.indexOf(el),
 250             d;
 251         if(index &gt; -1){
 252             replacement = Ext.getDom(replacement);
 253             if(domReplace){
 254                 d = this.elements[index];
 255                 d.parentNode.insertBefore(replacement, d);
 256                 Ext.removeNode(d);
 257             }
 258             this.elements.splice(index, 1, replacement);
 259         }
 260         return this;
 261     },
 262
 263 <span id='Ext-CompositeElementLite-method-clear'>    /**
 264 </span>     * Removes all elements.
 265      */
 266     clear : function(){
 267         this.elements = [];
 268     }
 269 };
 270
 271 Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
 272
 273 <span id='Ext-CompositeElementLite-method-importElementMethods'>/**
 274 </span> * @private
 275  * Copies all of the functions from Ext.core.Element's prototype onto CompositeElementLite's prototype.
 276  * This is called twice - once immediately below, and once again after additional Ext.core.Element
 277  * are added in Ext JS
 278  */
 279 Ext.CompositeElementLite.importElementMethods = function() {
 280     var fnName,
 281         ElProto = Ext.core.Element.prototype,
 282         CelProto = Ext.CompositeElementLite.prototype;
 283
 284     for (fnName in ElProto) {
 285         if (typeof ElProto[fnName] == 'function'){
 286             (function(fnName) {
 287                 CelProto[fnName] = CelProto[fnName] || function() {
 288                     return this.invoke(fnName, arguments);
 289                 };
 290             }).call(CelProto, fnName);
 291
 292         }
 293     }
 294 };
 295
 296 Ext.CompositeElementLite.importElementMethods();
 297
 298 if(Ext.DomQuery){
 299     Ext.core.Element.selectorFunction = Ext.DomQuery.select;
 300 }
 301
 302 <span id='Ext-core-Element-method-select'>/**
 303 </span> * Selects elements based on the passed CSS selector to enable {@link Ext.core.Element Element} methods
 304  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
 305  * {@link Ext.CompositeElementLite CompositeElementLite} object.
 306  * @param {String/Array} selector The CSS selector or an array of elements
 307  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
 308  * @return {CompositeElementLite/CompositeElement}
 309  * @member Ext.core.Element
 310  * @method select
 311  */
 312 Ext.core.Element.select = function(selector, root){
 313     var els;
 314     if(typeof selector == &quot;string&quot;){
 315         els = Ext.core.Element.selectorFunction(selector, root);
 316     }else if(selector.length !== undefined){
 317         els = selector;
 318     }else{
 319         //&lt;debug&gt;
 320         Ext.Error.raise({
 321             sourceClass: &quot;Ext.core.Element&quot;,
 322             sourceMethod: &quot;select&quot;,
 323             selector: selector,
 324             root: root,
 325             msg: &quot;Invalid selector specified: &quot; + selector
 326         });
 327         //&lt;/debug&gt;
 328     }
 329     return new Ext.CompositeElementLite(els);
 330 };
 331 <span id='Ext-method-select'>/**
 332 </span> * Selects elements based on the passed CSS selector to enable {@link Ext.core.Element Element} methods
 333  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
 334  * {@link Ext.CompositeElementLite CompositeElementLite} object.
 335  * @param {String/Array} selector The CSS selector or an array of elements
 336  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
 337  * @return {CompositeElementLite/CompositeElement}
 338  * @member Ext
 339  * @method select
 340  */
 341 Ext.select = Ext.core.Element.select;
 342 </pre>
 343 </body>
 344 </html>