ExtJs源码分析与学习—ExtJs元素Element（六）

linder0209 · 发表于 2013-2-7 19:27:23

批量操作元素Ext.CompositeElementLite

      该类提供了对一批元素进行相同操作的实现，他是建立在Ext.Element基础上，类中有一个集合，用来保存一批元素。该类的操作依赖于Ext.select，即Ext.Element.select函数来查询元素。
先看构造器方法

Ext.CompositeElementLite = function(els, root){ this.elements = []; this.add(els, root); this.el = new Ext.Element.Flyweight();}; 该构造器定义了两个变量，this.elements用来存放要添加的元素，this.el Ext.Element.Flyweight 对象，过程用来处理添加的元素，并利用this.add初始化元素，该方法代码如下：

add : function(els, root){       var me = this,          elements = me.elements;       if(!els){          return this;       }       if(typeof els == "string"){          els = Ext.Element.selectorFunction(els, root);       }else if(els.isComposite){          els = els.elements;       }else if(!Ext.isIterable(els)){          els = [els];       }       for(var i = 0, len = els.length; i < len; ++i){          elements.push(me.transformElement(els));       }       return me; },
      该函数根据所传不同参数，处理的会不一样，当els为 string时，会调用Ext.Element.selectorFunction返回数组，数组中元素为HTMLElement，Ext.Element.selectorFunction函数是Ext.DomQuery.select的别名，见Ext.DomQuery类的分析；当els.isComposite为true，即els本身就是Ext.CompositeElementLite的实例对象，那么直接取该对象的elements赋值给els；当els不可迭代，即不是数组，也不是对象。如传一个div元素，那么将其包装成数组。该方法中调用了transformElement

transformElement : function(el){       return Ext.getDom(el); },      该方法把el转换为HTMLElement。下面看原型方法prototype

getCount : function(){       return this.elements.length; },      该方法返回集合this.elements的长度。下面看invoke

/**    * 把Ext.Element.prototype中每一个函数包裹成新的函数，并调用执行    * @param {} fn    * @param {} args    * @return {}    */ invoke : function(fn, args){       var me = this,          els = me.elements,//元素结合          len = els.length,          e,          i;       for(i = 0; i < len; i++) {          e = els;          if(e){//对每个元素都执行Ext.Element类的同名函数             Ext.Element.prototype[fn].apply(me.getElement(e), args);          }       }       return me; },      该函数是为以下函数服务的

Ext.CompositeElementLite.importElementMethods = function() { var fnName,       ElProto = Ext.Element.prototype,       CelProto = Ext.CompositeElementLite.prototype; for (fnName in ElProto) {       if (typeof ElProto[fnName] == 'function'){          (function(fnName) {             CelProto[fnName] = CelProto[fnName] || function() {                   return this.invoke(fnName, arguments);             };          }).call(CelProto, fnName);       } }};      通过下面的调用，把Ext.Element’s prototype复制到Ext.CompositeElementLite’s prototype。

Ext.CompositeElementLite.importElementMethods();
      Ext.CompositeElement继承实现了Ext.CompositeElementLite，两者的区别就如同Ext.get和Ext.fly的关系
下面看看Ext.CompositeElement中Ext.Element.select方法

Ext.Element.select = function(selector, unique, root){ var els; if(typeof selector == "string"){//css表达式形式 //Ext.Element.selectorFunction实际上是Ext.DomQuery.select函数的别名       els = Ext.Element.selectorFunction(selector, root); }else if(selector.length !== undefined){//元素结合的形式       els = selector; }else{       throw "Invalid selector"; } //构造复合元素，true以Ext.Element形式构件，否则采用Ext.flyweight模式构建 return (unique === true) ? new Ext.CompositeElement(els) : new Ext.CompositeElementLite(els);};     Ext.select可以链式调用，如下代码

Ext.select('p') .addClass('.cls') .on('click',function(){alert(this)});
下面看个简单的例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head> <title>批量操作元素Ext.CompositeElementLite测试</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css"href="../ext-3.3.1/resources/css/ext-all.css" /><script type="text/javascript"src="../ext-3.3.1/adapter/ext/ext-base-debug.js"></script><script type="text/javascript"src="../ext-3.3.1/ext-all-debug-w-comments.js"></script><script type="text/javascript"src="../ext-3.3.1/src/locale/ext-lang-zh_CN.js"></script><script type="text/javascript" src="../ext-3.3.1/src/debug.js"></script><script type="text/javascript">       Ext.onReady(function() {Ext.BLANK_IMAGE_URL = '../ext-3.3.1/resources/images/default/s.gif';Ext.QuickTips.init();var els = Ext.select("#some-el div.some-class");// or select directly from an existing elementvar el = Ext.get('some-el');el.select('div.some-class');els.setWidth(100); // all elements become 100 widthels.hide(true); // all elements fade out and hide// orels.setWidth(100).hide(true);});function show(){var els = Ext.select("#some-el div.some-class");els.show();}</script>  </head> <body>  <div id="some-el"><div class="some-class">批量操作元素Ext.CompositeElementLite测试</div>  </div>  <input type="button" value="显示"> </body></html>

		自动登录	找回密码
密码			立即注册

ExtJs源码分析与学习—ExtJs元素Element（六）

浏览过的版块