CompositeElementLite.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:7k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!  * Ext JS Library 3.0.0  * Copyright(c) 2006-2009 Ext JS, LLC  * licensing@extjs.com  * http://www.extjs.com/license  */ /**
  2.  * @class Ext.CompositeElementLite
  3.  * Flyweight composite class. Reuses the same Ext.Element for element operations.
  4.  <pre><code>
  5.  var els = Ext.select("#some-el div.some-class");
  6.  // or select directly from an existing element
  7.  var el = Ext.get('some-el');
  8.  el.select('div.some-class');
  9.  els.setWidth(100); // all elements become 100 width
  10.  els.hide(true); // all elements fade out and hide
  11.  // or
  12.  els.setWidth(100).hide(true);
  13.  </code></pre><br><br>
  14.  * <b>NOTE: Although they are not listed, this class supports all of the set/update methods of Ext.Element. All Ext.Element
  15.  * actions will be performed on all the elements in this collection.</b>
  16.  */
  17. Ext.CompositeElementLite = function(els, root){
  18.     this.elements = [];
  19.     this.add(els, root);
  20.     this.el = new Ext.Element.Flyweight();
  21. };
  22. Ext.CompositeElementLite.prototype = {
  23. isComposite: true,
  24. /**
  25.      * Returns the number of elements in this composite
  26.      * @return Number
  27.      */
  28.     getCount : function(){
  29.         return this.elements.length;
  30.     },    
  31. add : function(els){
  32.         if(els){
  33.             if (Ext.isArray(els)) {
  34.                 this.elements = this.elements.concat(els);
  35.             } else {
  36.                 var yels = this.elements;                                 
  37.             Ext.each(els, function(e) {
  38.                     yels.push(e);
  39.                 });
  40.             }
  41.         }
  42.         return this;
  43.     },
  44.     invoke : function(fn, args){
  45.         var els = this.elements,
  46.          el = this.el;        
  47.     Ext.each(els, function(e) {    
  48.             el.dom = e;
  49.          Ext.Element.prototype[fn].apply(el, args);
  50.         });
  51.         return this;
  52.     },
  53.     /**
  54.      * Returns a flyweight Element of the dom element object at the specified index
  55.      * @param {Number} index
  56.      * @return {Ext.Element}
  57.      */
  58.     item : function(index){
  59.     var me = this;
  60.         if(!me.elements[index]){
  61.             return null;
  62.         }
  63.         me.el.dom = me.elements[index];
  64.         return me.el;
  65.     },
  66.     // fixes scope with flyweight
  67.     addListener : function(eventName, handler, scope, opt){
  68.         Ext.each(this.elements, function(e) {
  69.         Ext.EventManager.on(e, eventName, handler, scope || e, opt);
  70.         });
  71.         return this;
  72.     },
  73.     /**
  74.     * Calls the passed function passing (el, this, index) for each element in this composite. <b>The element
  75.     * passed is the flyweight (shared) Ext.Element instance, so if you require a
  76.     * a reference to the dom node, use el.dom.</b>
  77.     * @param {Function} fn The function to call
  78.     * @param {Object} scope (optional) The <i>this</i> object (defaults to the element)
  79.     * @return {CompositeElement} this
  80.     */
  81.     each : function(fn, scope){       
  82.         var me = this,
  83.          el = me.el;
  84.        
  85.     Ext.each(me.elements, function(e,i) {    
  86.             el.dom = e;
  87.          return fn.call(scope || el, el, me, i);
  88.         });
  89.         return me;
  90.     },
  91.     
  92.     /**
  93.      * Find the index of the passed element within the composite collection.
  94.      * @param el {Mixed} The id of an element, or an Ext.Element, or an HtmlElement to find within the composite collection.
  95.      * @return Number The index of the passed Ext.Element in the composite collection, or -1 if not found.
  96.      */
  97.     indexOf : function(el){
  98.         return this.elements.indexOf(Ext.getDom(el));
  99.     },
  100.     
  101.     /**
  102.     * Replaces the specified element with the passed element.
  103.     * @param {Mixed} el The id of an element, the Element itself, the index of the element in this composite
  104.     * to replace.
  105.     * @param {Mixed} replacement The id of an element or the Element itself.
  106.     * @param {Boolean} domReplace (Optional) True to remove and replace the element in the document too.
  107.     * @return {CompositeElement} this
  108.     */    
  109.     replaceElement : function(el, replacement, domReplace){
  110.         var index = !isNaN(el) ? el : this.indexOf(el),
  111.          d;
  112.         if(index > -1){
  113.             replacement = Ext.getDom(replacement);
  114.             if(domReplace){
  115.                 d = this.elements[index];
  116.                 d.parentNode.insertBefore(replacement, d);
  117.                 Ext.removeNode(d);
  118.             }
  119.             this.elements.splice(index, 1, replacement);
  120.         }
  121.         return this;
  122.     },
  123.     
  124.     /**
  125.      * Removes all elements.
  126.      */
  127.     clear : function(){
  128.         this.elements = [];
  129.     }
  130. };
  131. Ext.CompositeElementLite.prototype.on = Ext.CompositeElementLite.prototype.addListener;
  132. (function(){
  133. var fnName,
  134. ElProto = Ext.Element.prototype,
  135. CelProto = Ext.CompositeElementLite.prototype;
  136. for(fnName in ElProto){
  137.     if(Ext.isFunction(ElProto[fnName])){
  138.     (function(fnName){ 
  139.     CelProto[fnName] = CelProto[fnName] || function(){
  140.      return this.invoke(fnName, arguments);
  141.      };
  142.      }).call(CelProto, fnName);
  143.         
  144.     }
  145. }
  146. })();
  147. if(Ext.DomQuery){
  148.     Ext.Element.selectorFunction = Ext.DomQuery.select;
  149. /**
  150.  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
  151.  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
  152.  * {@link Ext.CompositeElementLite CompositeElementLite} object.
  153.  * @param {String/Array} selector The CSS selector or an array of elements
  154.  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object) <b>Not supported in core</b>
  155.  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
  156.  * @return {CompositeElementLite/CompositeElement}
  157.  * @member Ext.Element
  158.  * @method select
  159.  */
  160. Ext.Element.select = function(selector, unique, root){
  161.     var els;
  162.     if(typeof selector == "string"){
  163.         els = Ext.Element.selectorFunction(selector, root);
  164.     }else if(selector.length !== undefined){
  165.         els = selector;
  166.     }else{
  167.         throw "Invalid selector";
  168.     }
  169.     return new Ext.CompositeElementLite(els);
  170. };
  171. /**
  172.  * Selects elements based on the passed CSS selector to enable {@link Ext.Element Element} methods
  173.  * to be applied to many related elements in one statement through the returned {@link Ext.CompositeElement CompositeElement} or
  174.  * {@link Ext.CompositeElementLite CompositeElementLite} object.
  175.  * @param {String/Array} selector The CSS selector or an array of elements
  176.  * @param {Boolean} unique (optional) true to create a unique Ext.Element for each element (defaults to a shared flyweight object)
  177.  * @param {HTMLElement/String} root (optional) The root element of the query or id of the root
  178.  * @return {CompositeElementLite/CompositeElement}
  179.  * @member Ext
  180.  * @method select
  181.  */
  182. Ext.select = Ext.Element.select;