CompositeElementLite.js
上传用户:dawnssy
上传日期:2022-08-06
资源大小:9345k
文件大小:11k
源码类别:

JavaScript

开发平台:

JavaScript

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