摘要：前两篇读了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...
阅读全文
摘要：上篇读了Ext.Element的部分方法，这篇继续。El.addMethods方法，var ep = El.prototype;El.addMethods = function(o){ Ext.apply(ep, o);};El是Ext.Element类的简写，addMethods可认为是该类的静态方法。无须new使用类名直接调用。其内部调用的是Ext.apply，该方法会将o上的所有属性方法拷贝到ep上。使用该方法为Ext.Element类的原型上添加属性，方法。如Ext中队样式的操作、动画、位置等都是通过该方法扩展。Ext.apply在 读Ext之一（实用方法）中介绍了。接着看El.g..
阅读全文
摘要：终于越来越接近Ext的核心了。这篇开始Ext.Element，这里说的Ext元素指的是Ext.Element类的实例。任何前端库都会涉及到对HTMLElement的操作，JQuery更是以其为中心，一个$()函数调用后将DOM元素以索引方式存在JQuery对象中。Ext则使用了一个称为 Ext.Element 的类，如 Ext.get/Ext.fly 返回的都是该类的实例对象。许多操作如样式，添加事件等都封装到该类里。Ext.Element的定义大概框架如下Ext.Element = function(element, forceNew){ var dom = typeof elemen...
阅读全文
摘要：IE 除了发明 innerHTML这个快捷创建DOM元素(及其属性等)外，还发明了insertAdjacentHTML/insertAdjacentText方法。它们首次在IE4中引入，随后其它浏览器如Opera、Safari、Chrome相继实现了它们。唯独Firefox没有实现。（注：2011-11 Firefox8发布，已支持insertAdjacentHTML，但仍未支持insertAdjacentText）鉴于insertAdjacentHTML被众多浏览器实现，html5已经将其列纳入，insertAdjacentText则没那么幸运。Firefox中使用另外一些方式实现了相同功能
阅读全文
摘要：Ext core 3.1.0(下载地址)中Ext.DomHelper中的applyStyles方法源码如下：applyStyles : function(el, styles){ if(styles){ var i = 0, len, style; el = Ext.fly(el); if(Ext.isFunction(styles)){ styles = styles.call(); } if(Ext.isString(styles)){ ...
阅读全文
摘要：innerHTML 这个由IE引入的属性成了事实标准，各浏览器均支持。尽管html4中没有承认它，但html5已经正式将其纳入。我们知道任何一个库都少不了DOM操作，因为用JS操作DOM（早期微软称DHTML）是日常开发中最基本的工作之一。这篇主要讲述Ext.DomHelper中的 createHtml 函数。首先Ext.DomHelper为一个单例对象。使用其时可沿用Ext库的习惯使用别名dhvar dh = Ext.DomHelper; // 使用dh别名dh有以下方法：markupapplyStylesinsertHtmlinsertBeforeinsertAfterinsertFirs
阅读全文
摘要：首先，回到第一篇。使用Ext.apply为Ext对象添加了一些属性，Ext.apply(Ext, { ... USE_NATIVE_JSON : false, ... });USE_NATIVE_JSON 即为其中之一， 可以使用它来设置是否开启浏览器原始的JSON（即JSON.parse，JSON.stringify）来解析或反解析。这是ECMA5中加入的，在字符串转换成JSON的三种方式中已经提到。该值初始为false，即不开启。设置为true则开启如Ext.USE_NATIVE_JSON = true;Ext.util.JSON 内部定义了一些私有方法...
阅读全文
摘要：Ext的事件管理非常强大。主要定义在Ext.EventManager对象(单例模式)中。该对象有以下方法addListenerremoveListenerremoveAllgetListenerspurgeElement_unloadonDocumentReadyonunstoppedMouseDownEventon / un 是 addListener / removeListener的快捷方式 。stoppedMouseDownEvent 是 Ext.util.Event 类的实例对象，这个类定义在Observable.js中。stoppedMouseDownEvent 在Ext.Even
阅读全文
摘要：Ext库也对浏览器原生的事件对象做了包装，以保证兼容所有浏览器。这里列举了浏览器原生事件对象各浏览器中兼容性，这里列出了各种情况下事件对象的获取。在Ext事件管理类 Ext.EventManager 中会悄悄的将浏览器原始事件对象进行转换e = Ext.EventObject.setEvent(e);Ext.EventObject 即为包装后的事件对象(暂称为Ext事件对象)。先从全局上看看该对象的实现，其中...省略了部分代码。Ext.EventObject = function(){ var E = Ext.lib.Event, ...; Ext.EventObjectImp...
阅读全文
摘要：Ext.util.TaskRunner 用来管理多任务定时管理。每一个任务是一个JS对象，具有以下属性run, interval, args, scope, duration, repeat。示例如下：var task = { run : function(){...}, interval : 1000, args : [], scope : obj, duration : 5000, repeat : 3}run和interval是必选，其它为可选。鸟瞰类如下：Ext.util.TaskRunner = function(interval){ interval = interval |...
阅读全文
摘要：Ext.util.DelayedTask类从名字上就可以看出它是延迟任务的执行。即指定时间之后执行任务。整个类如下：Ext.util.DelayedTask = function(fn, scope, args){ var me = this, id, call = function(){ clearInterval(id); id = null; fn.apply(scope, args || []); }; me.delay = function(delay, newFn, newScope, newA...
阅读全文
摘要：上篇看了ext-base-event.js(Ext.lib.Event)，这篇看ext-base-dom.js(Ext.lib.Dom)。后续EventManager.js(Ext.EventManager)其中会用到该篇的Ext.lib.Dom。整体浏览ext-base-dom.js可以看到还是一个匿名函数执行，与上一篇不同的是这次并非返回包装好的对象pub，而是直接将对象赋值给Ext.lib.Dom。(function(){ var doc = document, ...; Ext.lib.Dom = { ... };})();一些变量声明，var doc =...
阅读全文
摘要：这篇开始读ext-base-event.js。该文件定义了Ext.lib.Event对象，Ext.lib这个命名空间在Ext core的Ext.js中命名的。Ext.ns("Ext.util", "Ext.lib", "Ext.data");Ext.lib上的属性如下：Ext.lib.AjaxExt.lib.AnimExt.lib.AnimMgrExt.lib.BezierExt.lib.DomExt.lib.EasingExt.lib.EventExt.lib.AnimBaseExt.lib.ColorAnimExt.lib.Mot
阅读全文
摘要：续上篇，Ext.ns = Ext.namespace; 有了一个简写的namespace。整个匿名函数执行完了。接下来Ext.ns("Ext.util", "Ext.lib", "Ext.data"); Ext.elCache = {}; 分别为Ext添加了util，lib，data，elCache属性，默认都是空的对象。Ext.apply(Function.prototype, { createInterceptor : function(){ // ... }, createCallback : function(){ // ..
阅读全文
摘要：上篇看到Ext.extend，接着往下看。Ext.namespace，用来管理Ext库命名空间的方法namespace : function(){ var o, d; Ext.each(arguments, function(v) { d = v.split("."); o = window[d[0]] = window[d[0]] || {}; Ext.each(d.slice(1), function(v2){ o = o[v2] = o[v2] || {}; }); }); return...
阅读全文
摘要：第一句window.undefined = window.undefined; 兼容IE6以下的浏览器，有人解释过了。定义Ext全局变量Ext = { version : '3.1.0'};注意这里没有使用var，不使用var声明变量被认为是不好的编程习惯，尤其是函数内声明变量不写var更被称为是无穷无尽的Bug根源。这里则不会，因为变量Ext是该库唯一的全局变量(命名空间)。其它Ext源码中的变量声明都加上了var。给Ext添加静态apply方法，该方法是核心方法之一，会用其扩展Ext。Ext.apply = function(o, c, defaults){ // no .
阅读全文
