抛砖引玉吧,现在还没有中文版本出现
引言:
Winston Churchill : “We make a living by what we get, but we make a life by what we give.”。
丘吉尔说过:“我们靠所得来谋生,但却是靠给予来创造生活。” Extjs作为开源社区的一员,将继续奉献,这次发布的ext-core3.0 采用 宽松的mit授权,对所有人完全免费。
介绍:
Ext core 是一个轻量级的特性丰富的javascript库,ext-core的丰富特性可以使得web开发具有良好的设计和可扩展性。
ext-core支持dom操作和遍历,ajax,事件和自定义事件,动画,模版,面向对象机制等等。
ext-core基于mit授权,对于网页和小的网络应用十分完美。
下载地址
最新消息地址
包含ext-core
ext-core有调试版本ext-core-debug.js以及利用YUI Compressor压缩的产品版本ext-core.js。
如果在开发阶段:
<script src="ext-core-debug.js"></script>
在产品实用阶段(gzip后大小25k)
<script src="ext-core.js"></script>
简单示例:
在你的页面包含ext-core后,运行下列代码看看是否正常。
Ext.onReady(function() { Ext.DomHelper.append(document.body, {tag: 'p', cls: 'some-class'}); Ext.select('p.some-class').update('Ext Core successfully injected'); });
关于本文档:
ext-core文档由Tommy Maintz, Aaron Conran, James Donaghue, Jamie Avins & Evan Trimboli编写,
授权方式为GNU FDL
Copyright (C) 2009 Ext JS, LLC. Permission is granted to copy, distribute and/or modify this document under the terms of the GNU Free Documentation License, Version 1.3 or any later version published by the Free Software Foundation; with no Invariant Sections, no Front-Cover Texts, and no Back-Cover Texts. A copy of the license is included in the section entitled "GNU Free Documentation License".
Ext.Element 入门
一个网页文档包括很多html代码,当浏览器载入网页文档时,你的html代码的每个标签都被转换成HTMLElement ,并且浏览器建立了一个DOM
树,这棵dom树被保存在浏览器的全局空间document变量中,这个变量包含指向每一个dom树节点的引用。
DOM提供了方法getElementById
,它允许你获得dom树中的某一节点,各个浏览器对于dom操作有很多差异,ext-core实现了一个类Ext.Element,能够为你提供跨浏览器的dom操作支持。
Ext.Element 是库中含有最多方法的类
,可以把它的方法分类为:
css样式操作(例如:setStyle, addClass)
dom查询和遍历(例如:query, select, findParent)
dom操作(例如:createChild, remove)
大小尺寸操作(例如:getHeight, getWidth)
你可以用Ext.get获得一个Ext.Element的实例,它是底层HTMLElement的封装。
例如你想获得id为myElementId的元素,可以这样写
var el = Ext.get('myElementId');
利用 Firebug,你可以看到这个Ext.Element实例是如何封装底层的HTMLElement的,
var el = Ext.get('myElementId'); console.dir(el);
console.dir
是firebug提供的可以看到对象里的所有属性,方法,并且允许你对某些属性的折叠和扩展操作。属性为黑色显示,方法为绿色显示,构造函数(类)为红色显示。
让我们和图中的myElementId交互一下
var el = Ext.get('myElementId'); el.addClass('error');
执行完这个代码后,段落的字体颜色就变成红色了,这个页面包含了条样式规则,它把所有具有class为error的元素的字体都变成红色,该条样式规则为:
.error { color: red; }
下面的一节 css样式操作 将会介绍更多的操纵元素样式的方法。
介绍 享元:
享元模式
是指创造一个全局对象,并且频繁的重用它。当extjs载入后构造了一个全局对象(Ext.Element的实例),这个对象可以用来表示对任何底层dom节点的封装,如果要访问这个全局对象,你可以调用 Ext.fly 方法,extjs新手总是会对何时调用Ext.get或Ext.fly
产生疑惑。
如果需要保存一个Ext.Element的实例的引用后期使用,那么用Ext.get方法。有时你不需要存储这个引用,那么你可以使用全局共享的Ext.Element实例,要访问这个实例,使用Ext.fly(elementId)。
让我们将样式类error从刚才那个段落中移去:
Ext.fly('myElementId').removeClass('error');
当这段代码被执行时,ext使用共享的实例而并不需要创建一个崭新的Ext.Element。fly方法适合执行一条原子性操作的代码
,你不要想着去存储这个全局共享对象的引用,因为它会被后面的代码改变的,例如下列代码:
var el = Ext.fly('foo'); Ext.fly('bar').frame(); el.addClass('error');
frame 是一种高亮效果,属于特效库的一部分,那么你认为这个结果会是什么样子?
答案是id为bar的元素会有frame的效果,紧接着样式类error的效果也会附加在它上面。id为foo的元素从头到尾都没有任何变化,因为当我们在bar上运用frame特效时,指向全局共享对象的el已经被改变了。
如果你不想这样并且仍然希望使用Ext.fly方法,那么重新读一下上面关于享元的适用范围