- 浏览: 315343 次
- 性别:
文章分类
最新评论
-
i042416:
分析在哪?
angular分析 -
何盆盆:
你好,请问您这是Extjs3还是Extjs4
ExtJs源码分析与学习—ExtJs事件机制(一) -
124753561:
引用引用引用引用引用[u][u][u][u][i][i][i] ...
Subvision SVN 服务端与客户端的安装 -
谷超:
请问一下例子中itext是什么版本的?
利用iText生成word文档例子参考 -
geosmart:
正好要用到执行字符串中方法,学习了
java中利用反射机制实现调用给定为字符串的方法名
批量操作元素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[i])); } 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[i]; 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 element var el = Ext.get('some-el'); el.select('div.some-class'); els.setWidth(100); // all elements become 100 width els.hide(true); // all elements fade out and hide // or els.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" onclick="show();" value="显示"> </body> </html>
发表评论
-
ExtJs源码分析与学习—Ext.ToolTip应用
2011-12-29 14:18 1796源码待分析,先粘一例子备用 // ... -
ExtJs源码分析与学习—遮罩层
2011-09-06 16:49 4732类Ext.LoadMask ... -
ExtJs源码分析与学习—Ext.UpdateManager
2011-09-06 16:12 2135如果想让html页面中任意元素自动局部刷新,而不是整 ... -
ExtJs源码分析与学习—ExtJs元素Element(五)
2011-06-07 17:35 1890元素的查询Ext.DomQuery 该 ... -
ExtJs源码分析与学习—ExtJs元素Element(四)
2011-06-07 17:17 2941元素的操作Ext.DomHelper ... -
ExtJs源码分析与学习—ExtJs元素Element(三)
2011-06-07 17:06 1005Ext.Element扩展 通过Ex ... -
ExtJs源码分析与学习—ExtJs元素Element(二)
2011-06-07 16:42 2581元素操作核心类Ext.Elemen ... -
ExtJs源码分析与学习—ExtJs元素Element(一)
2011-06-07 15:47 2078从这一节开始 ... -
ExtJs源码分析与学习—工具类Ext.util.TextMetrics
2011-06-07 15:11 2001Ext提供了一个 ... -
ExtJs源码分析与学习—ExtJs事件机制(六)
2011-06-07 11:25 1441最后把涉及到Ext事件的相关类图贴到这里 ... -
ExtJs源码分析与学习—ExtJs事件机制(五)
2011-06-07 11:15 3013最近一直忙着做产品,所以好久没有写文章了,下面接着 ... -
Ext 组件操作总结——会不断完善
2011-05-10 16:36 26501、Ext.Component 该组件在渲染的时候会默认的 ... -
ExtJs表单几种验证与扩展
2011-05-03 16:26 4854首先说明一下表单验证与其相关的一些设置 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(四)
2011-03-19 23:37 5269ExtJs组件事件——ExtJs自定义事件的处理 ... -
ExtJs源码分析与学习—ExtJs事件机制(三)
2011-03-15 20:20 3171这篇讲ExtJs对事件的管理和调用 Ext ... -
ExtJs源码分析与学习—ExtJs事件机制(二)
2011-03-15 20:15 2519在ExtJs源码分析与学习—ExtJs事件机制( ... -
ExtJs源码分析与学习—ExtJs事件机制(一)
2011-03-15 18:53 2747前面讲了ExtJs核 ... -
ExtJs源码分析与学习—ExtJs核心代码扩展
2011-01-20 19:16 2042前面三篇文章参考作者snandy总结了Ext中核心 ... -
ExtJs源码分析与学习—ExtJs核心代码(三)
2011-01-17 17:29 2123Ext为javascript的一些对象进行了扩展,主要有Str ... -
ExtJs源码分析与学习—ExtJs核心代码(二)
2011-01-17 16:23 1825接上篇 下面介绍Ext.js ...
相关推荐
ExtJS3.0 源码分析与开发实例宝典
资源名称:Ext JS源码分析与开发实例宝典内容简介:本书全面系统地剖析了ExtJS 3.0的架构设计原理。通过对源码的“抽丝剥茧”,读者可以掌握Ext JS架构的精妙,从原理层面用活Ext JS。此外,本书还提出了大量的解决...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
这个是《ExtJS源码分析与开发实例宝典》高清版本,是本人花钱买来的,所以分享给大家,希望大家喜欢,由于本人一次只能上传60M大的文件(试了好多次,每次都上传到99%就不动了,还以为csdn在后台审核内容呢,害我电脑...
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...
NULL 博文链接:https://linder0209.iteye.com/blog/865372
Ext+JS源码分析与开发实例宝典 是extjs3.0的学习书 书得内容很不错。深入解析extjs 资源是pdf文档. 本人自己还做了pdf的完整书签目录,便于方便和阅读. 文档比较大,一共压缩成12卷.需12卷全部下载完。 就第一个...
《ExtJS源码分析与开发实例宝典》是一本不错的关于ExtJS开发实践的教程,特附上源码,与各位共享,谢谢。
ExtJS源码分析与开发实例宝典完整版 1、JS画图部分代码在IE8上看不到效果,因为IE8不支持VML。 2、扩展的组件为作者独立完成,仅供学习之用,一些组件并没有经过严格的测试。 如果需要用到项目之中,请自行测试。 ...
extjs源码分析与实例开发宝典PDF格式
extjs源码分析与开发实例宝典PDF格式文件
extjs源码分析与开发实例宝典part10共10卷
extjs源码分析与实例开发宝典pdf格式电子书第三部分
extjs源码分析与实例开发宝典part08共10个分卷