- 浏览: 1163833 次
- 性别:
- 来自: 北京
文章分类
最新评论
-
zhizhen23:
LZ 提供的链接地址失效了
重写的isPlainObject方法 -
LovingBaby:
LovingBaby 写道function fun() {}f ...
读jq之二(两种扩展) -
LovingBaby:
说的很清楚!jQuery作者为了实现简洁调用的苦心!高超的编程 ...
读jq之一(jq对象的组成) -
hard_ly:
...
将伪数组转换成数组 -
zlxzlxzlxzlxzlx:
这不能算是任意进制之间的转换,例如二十六进制、十二进制又该如何 ...
用递归实现十进制数转换N进制
前两篇读了Ext.Element,这篇介绍的Ext.CompositeElementLite类是对集合(Ext.Element)的操作。
Ext.select / Ext.element.select 依赖于Ext.CompositeElementLite。
类的大概结构如下(省略了挂在prototype上的很多方法),
Ext.CompositeElementLite = function(els, root){ this.elements = []; this.add(els, root); this.el = new Ext.Element.Flyweight(); }; Ext.CompositeElementLite.prototype = { isComposite: true, getElement : function(el){ // Set the shared flyweight dom property to the current element var e = this.el; e.dom = el; e.id = el.id; return e; }, ... };
构造器内定义了两个个字段
this.elements
存放的是HTMLElement
this.el
是Ext.Element.Flyweight 对象
new 该类时
var cel = new Ext.Ext.CompositeElementLite(els,root);
构造器调用了this.add,该方法如下:
add : function(els, root){ var me = this, elements = me.elements; if(!els){ return this; } if(Ext.isString(els)){ 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有三种分支:
分支1,els为字符串(css选择器如.cls)
调用Ext.Element.selectorFunction,返回数组。该函数是Ext.DomQuery.select的别名。Ext.DomQuery.select暂不提,只需了解调用后会返回一个数组,数组中存放的是HTMLElement。
分支2,els.isComposite为true
即els本身就是Ext.CompositeElementLite的实例对象,那么直接取该对象的elements赋值给els。
分支3,els不可迭代,即不是数组,也不是对象。
如传一个div元素,那么将其包装成数组。
for循环将数组中的元素一一添加到elements中。for中使用了transformElement方法,
// private transformElement : function(el){ return Ext.getDom(el); },
这个方法用来将el转成HTMLElement,下面依次看原型上的其它属性,方法
isComposite: true,
isComposite 用来表示对象是Ext.CompositeElementLite类的对象。仅在类内部使用。在上面提到的add方法中用到了。
接着是 getElement 方法,也仅在该类内部使用
getElement : function(el){ // Set the shared flyweight dom property to the current element var e = this.el; e.dom = el; e.id = el.id; return e; },
用来获取构造器中定义的字段el(Ext.Element.Flyweight),Ext.Element.Flyweight基本上可以当成是Ext.Element。
这个方法设计很巧妙,它并没有每次都new一个Ext.Element.Flyweight,然后赋值给this.el。而是继续使用已有的this.el,只是更新了this.el.dom和this.el.id。
往下是 getCount方法,
getCount : function(){ return this.elements.length; },
该方法返回集合this.elements的长度。
接下来是 invoke 方法,
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.prototype[fn].apply(me.getElement(e), args); } } return me; },
简单讲就是将Ext.Element.prototype的函数fn在指定的上下文(me.getElement(e))上执行。
嗯,还是没明白。实际上这个函数不是提供给客户端程序员的,它是用来扩展Ext.CompositeElementLite类的。
即将Ext.Element原型上的所有方法都复制给Ext.CompositeElementLite的原型。以下代码就是干这个事的
(function(){ var fnName, ElProto = Ext.Element.prototype, CelProto = Ext.CompositeElementLite.prototype; for(fnName in ElProto){ if(Ext.isFunction(ElProto[fnName])){ (function(fnName){ CelProto[fnName] = CelProto[fnName] || function(){ return this.invoke(fnName, arguments); }; }).call(CelProto, fnName); } } })();
这段代码对于初学JS的程序员理解起来较困难。慢慢看吧..
接下来是 item 方法,
item : function(index){ var me = this, el = me.elements[index], out = null; if(el){ out = me.getElement(el); } return out; },
它返回集合中指定的元素,如cel.item(1)返回集合中的第二个元素。
往下是 addListener 方法,
addListener : function(eventName, handler, scope, opt){ var els = this.elements, len = els.length, i, e; for(i = 0; i<len; i++) { e = els[i]; if(e) { Ext.EventManager.on(e, eventName, handler, scope || e, opt); } } return this; },
用来给集合中的所有元素添加事件,内部使用前面提到的 Ext.EventManager.on方法。
接下来是 each 方法,
each : function(fn, scope){ var me = this, els = me.elements, len = els.length, i, e; for(i = 0; i<len; i++) { e = els[i]; if(e){ e = this.getElement(e); if(fn.call(scope || e, e, me, i)){ break; } } } return me; },
用来迭代集合中的元素,使用fn来调用,scope指定fn的上下文。与JQuery的 $().each
类似。
接着是 fill 方法,
fill : function(els){ var me = this; me.elements = []; me.add(els); return me; },
该方法会用新的元素集合填充elements。会清空之前的elements。
接下来是 filter 方法,
filter : function(selector){ var els = [], me = this, elements = me.elements, fn = Ext.isFunction(selector) ? selector : function(el){ return el.is(selector); }; me.each(function(el, self, i){ if(fn(el, i) !== false){ els[els.length] = me.transformElement(el); } }); me.elements = els; return me; },
该方法用来过滤集合元素,条件selector可以是函数,也可以是css选择器。把符合条件的存放到字段elements中。
内部使用了is方法,该方法在上一篇已经提到。
再往下是 indexof 方法,
indexOf : function(el){ return this.elements.indexOf(this.transformElement(el)); },
很熟悉吧,和String和Array的indexOf类似,如果存在返回其索引,否则返回-1。内部实际使用的就是数组的indexOf方法。
indexOf是ECMAScript 5中数组新加的。IE6等老浏览器不支持,Ext给Array的原型添加了该方法,见 读Ext之三(原型扩展)
。
接着看 replaceElement 方法,
replaceElement : function(el, replacement, domReplace){ var index = !isNaN(el) ? el : this.indexOf(el), d; if(index > -1){ replacement = Ext.getDom(replacement); if(domReplace){ d = this.elements[index]; d.parentNode.insertBefore(replacement, d); Ext.removeNode(d); } this.elements.splice(index, 1, replacement); } return this; },
该方法会把集合中指定的元素(el)用新的元素(replacement)替换。domReplace为true则将文档中的也替换,否则只替换集合elements中的。
最后一个方法是 clear,
clear : function(){ this.elements = []; }
顾名思义,用来 清空数组
。与 Prototype库
不同的Ext是重新给数组this.elements赋值为空数组。
Prototype库则是将数组的length赋值为0以实现清空。注意JS中数组的length是可写的。其它语言如Java则是只读的。
在篇头我提到了Ext.select / Ext.Element.select,且说过该方法的实现依赖于Ext.CompositeElementLite。下面揭开面纱看看该方法源码,
Ext.Element.select = function(selector, root){ var els; if(typeof selector == "string"){ els = Ext.Element.selectorFunction(selector, root); }else if(selector.length !== undefined){ els = selector; }else{ throw "Invalid selector"; } return new Ext.CompositeElementLite(els); }; Ext.select = Ext.Element.select;
可以看到Ext.select是Ext.Element.select的别名,它更简短。Ext.select 在日常开发中经常使用到。
它相当于JQuery的选择器,即往往是先定位到某(或某些)元素(或元素集合)后再进行一系列操作(方法调用)。不知注意到没有,Ext.CompositeElementLite的方法中都会返回自身(this)。
因此可以实现 链式调用
的语法效果。如
Ext.select('p') .addClass('.cls') .on('click',function(){alert(this)});
选择页面中的段落p元素,为其添加类cls,再为其添加点击事件。只要愿意你可以一直点操作下去。
好了,介绍了怎么使用。看看它是如何实现的,
参数selector可以是css选择器(字符串),可以是HTMLELement集合。将其作为参数传给new Ext.CompositeElementLite。返回的是Ext.CompositeElementLite的实例对象。
很简单,其实内部仅仅是new了个Ext.CompositeElementLite,了解了该类。其实就了解了Ext.select。
- CompositeElementLite.rar (3.1 KB)
- 下载次数: 5
发表评论
-
读Ext之十四(Ext元素)
2011-01-18 14:57 2163上篇读了Ext.Element的部分方法,这篇继续。El.ad ... -
读Ext之十三(Ext元素)
2011-01-16 16:57 1985终于越来越接近Ext的核心了。这篇开始Ext.Element, ... -
读Ext之十二(在各个位置插入元素)
2011-01-13 13:17 7765IE 除了发明 innerHTML这个快捷创建DOM元素(及其 ... -
Ext core 3.1.0的一个大Bug
2011-01-12 19:28 6504Ext core 3.1.0(下载地址 )中Ext.DomH ... -
读Ext之十一(通过innerHTML创建元素)
2011-01-09 22:19 2049innerHTML 这个由 IE 引入的属性成了事实标准, ... -
读Ext之十(解析JSON)
2011-01-03 11:36 4519首先,回到第一篇 。 ... -
读Ext之九(事件管理)
2010-12-08 08:39 2955Ext的事件管理非常强大。主要定义在Ext.EventMana ... -
读Ext之八(原生事件对象的修复及扩充)
2010-11-27 18:51 2271Ext库也对浏览器原生的事件对象做了包装,以保证兼容所有浏览器 ... -
读Ext之七(多任务定时管理)
2010-11-25 17:24 2767Ext.util.TaskRunner 用来管理多任务定时管理 ... -
读Ext之六(延迟任务的执行)
2010-11-24 17:36 3925Ext.util.DelayedTask类从名字上就可以看出它 ... -
读Ext之五(Dom的低级封装)
2010-11-14 12:08 2514上篇看了ext-base-event.js(E ... -
读Ext之四(事件的低级封装)
2010-11-11 17:10 3452十一前读了Ext core的Ext.js,这篇开始读ext-b ... -
读Ext之三(原型扩展)
2010-09-30 09:51 3142续上篇, Ext.ns = Ext.name ... -
读Ext之二(实用方法)
2010-09-24 16:37 4942上篇看到Ext.extend,接着往下看。 Ext.n ... -
读Ext之一(实用方法)
2010-09-24 10:19 4034第一句 window.undefined = window. ...
相关推荐
标题“读Ext之十三(Ext元素)”暗示我们将关注Ext.js中的元素操作,这是构建用户界面的基础。Element是Ext.js中的一个核心类,它封装了DOM元素的操作,提供了大量便捷的方法来处理样式、事件、动画等。 描述中提到...
本文将深入探讨“读Ext之十二(在各个位置插入元素)”这一主题,主要关注如何利用ExtJS中的DomHelper工具来高效地在DOM树中插入元素。 首先,DomHelper是ExtJS中用于操作DOM的一个重要工具类,它的主要职责是创建...
综上所述,“读Ext之十(解析JSON)”可能会涵盖如何在Ext JS环境中设置和使用Store来解析和操作JSON数据,以及如何利用数据模型、Proxy、Reader等工具实现数据的加载、显示和交互。通过学习这个主题,开发者可以更...
EXT.ux.UploadDialog是EXT扩展库中的一个插件,它提供了一种对话框式的界面,用于处理文件上传,特别是图片文件的批量操作。 EXT库的核心在于其组件模型,通过各种预定义的组件(如表格、表单、树形视图等)可以...
在本文中,我们将深入探讨如何在Ext 3.x框架中实现文件的批量上传功能。Ext 3.x是一款强大的JavaScript库,用于构建富客户端应用程序。它提供了丰富的组件和强大的数据管理功能,非常适合创建复杂的Web界面,包括...
批量上传可以极大地提高用户效率,减少多次单个文件上传的操作。 批量上传的核心是使用Ajax或者IFrame技术来模拟多文件提交。Ext JS 提供了`Ext.form.FileField`组件,用于处理文件选择和上传。然而,单个`...
Ext.ux.UploadDialog批量上传文件实例是一个基于ExtJS组件库扩展插件的文件上传解决方案,主要针对需要一次性处理多个文件上传的应用场景。ExtJS是一个强大的JavaScript框架,它提供了丰富的用户界面组件,而Ext.ux....
Linux最常用的文件系统类型之一就是EXT系列,包括EXT2、EXT3和EXT4。然而,Windows操作系统默认并不支持直接读取这些格式的分区。这时,就需要借助第三方工具来实现这一目标,例如“Windows读取Ext4分区的工具”——...
标题中的“Ext 对数据库操作的简单实例”指的是使用Ext JS框架进行数据库交互的实际应用。Ext JS是一个用于构建富客户端Web应用程序的JavaScript库,它提供了丰富的组件和强大的数据管理功能,可以方便地与后端...
EXT的文件批量上传功能允许用户一次性选择并上传多个文件,提高了用户体验,减少了用户操作步骤。 在EXT的文件批量上传中,主要涉及以下几个核心知识点: 1. **EXT组件**:EXT库中的Grid、FormPanel、FileInput等...
**页面布局**是EXT的核心功能之一,它提供了多种布局模式来适应不同设计需求。常见的布局有: 1. **Accordion布局**:这种布局方式使得每个子组件可以折叠,适用于展示大量同类信息但有限的空间。布局由`Ext.layout...
在这个场景中,“ext实现图片批量上传”指的是利用ExtJS来创建一个功能,允许用户一次性选择并上传多张图片。这种功能在各种应用程序中都很常见,比如社交网络、博客平台或任何需要用户上传图片的地方。 批量上传...
ext,ext操作手册
在Ext JS框架中,`Ext.get`和`Ext.fly`是两个非常重要的方法,它们主要用于操作DOM元素。理解这两个方法之间的区别以及如何使用它们对于开发高质量、高效率的应用程序至关重要。 #### 1. Ext.get **定义**:`Ext....
可以读写Ext2,以Ext2方式挂载Ext3文件系统(不支持Ext3日志),不支持中文! It provides Windows NT4.0/2000/XP/2003/Vista/2008 with full access to Linux Ext2 volumes (read access andwrite access). This ...
但有一些第三方工具可以帮助我们解决这个问题,其中之一就是Ext2Fsd。Ext2Fsd是一个免费的开源软件,专门设计用于Windows系统上读/写Linux的EXT2、EXT3和EXT4文件系统。 **Ext2Fsd的主要功能:** 1. **读写支持**...
同时,CompositeElement和CompositeElementLite是处理一组DOM元素的集合,提高了批量操作的效率。 "EXT核心API详解(六)-Ext.Fx.txt"涉及的是Ext的动画效果和特效,如淡入淡出、滑动、缩放等,这些功能让应用程序的...
`EventManager`负责事件注册和分发,`EventObject`封装了事件的相关信息,而`CompositeElement`和`CompositeElementLite`则允许你批量操作一组DOM元素,提高了效率。 7. **Ext.KeyNav, KeyMap, JSON, Format, ...
EXT框架是一种基于JavaScript的富客户端应用开发框架,尤其在Web应用程序中被广泛使用,它提供了丰富的组件库,能够实现各种复杂的功能,包括批量上传图片。批量上传图片EXT框架是EXT框架的一个扩展,专为处理大量...