第2章 Ext起步
Ext 是一个工具库(Library),还是一套框架
(Framework)呢?“框架”字眼似乎有“专制”
的味道——因为人们总想冲破各种条条框框。
实际上使用了 Ext 就可以满足一般性的软件
GUI 开发要求,因此按照作者 Jack 的原话,Ext
定位于“真正地整合好的和完整的程序开发平
台”。
要全面掌握 Ext,并非一时半刻可以完成,
必须经过一个阶段的学习。就让我们从最简单
的对 Ext 的了解开始吧。
词关键
初学者手把手入门Ext
Ext 及其 Core 的简介
兼容其他 JS 库
开始学习 Ext?从哪
Ext 的重点是什么?
JavaScript 凌厉开发
ExtJS3 详解与实践
Ext JS
[
8
]
2.1 获取 Ext 的方法
由于 JavaScript 是一门解释型的语言而非编译型语言,因此可以说 Ext 程序便是 Ext
JavaScript 的源码本身。 下面介绍的流程。
获取 Ext 的具体方法如
登录官 ttp://www.extjs.com。
(1) 方网站 h
(2) 进入 download 页面,选择当前最新的版本 Stable Release 3.0 下载。如需要下载以
往的版本(1.x~2.x),可以在 http://extjs.com/learn/Ext_Version_ rch 置找 。
A ives 位 到
(3) 下载并解压缩后,浏览它的文件夹,会发现如下的安排(以 Ext3.2 为例):
Ext 根目录
|+-- adapter (Ext 库底层的适配器)
| |
| +-- ext (Ext 自家的适配器)
| +-- jquery (为结合 jQuery 库的适配器)
| +-- prototype (为结合 Prototype.js 库的适配器)
| +-- yui (为结合 YUI Library 库的适配器)
|+-- pkgs (各种常用的包,体积更小)
|+-- docs (Ext 文档中心,浏览需要服务端的支持)
|+-- example (100 多个自带的范例)
|+-- resources (各种 CSS 样式表、图片等资源文件)
|+-- source (全部的源代码)
|
(4) 下载回来的 ZIP 文件已经包括文档中心了。除了这里有之外,官方还提供 AIR 版本
的文档,内容和用法都相同,只是在 AdobeAIR 环境中运行而已,可独立执行。
+-- welcome (欢迎页面)
这些代码有调试的版本和供发布时的产品版本。产品版本已经做压缩(消除空白符、硬回
车和注释)和混淆的处理(所有局部变量重命名为短的名称,使用 YUICompressor)。在开发阶
段,您应使用的是‐debug 版本,这样才会看到未混淆过的错误信息。
要引入 Ext 的开发版本,这样引入 JavaScript 文件就可以了:
<script src="e t-al .js" ipt>x l-debug ></scr
要引入产品版本(打开 gzipped 后约 250KB 大小),就省略掉“‐debug”:
<scr
ipt src="ext-all.js"></script>
2.2 Ext 运行环境
要保证您所部署的浏览器环境运行 Ext 正常,浏览器必须满足下列版本的要求:
WindowsInternetExplorer6 及更高版本
第 2 章Ext 起步
1.5 及更高版本(PC 和 Macintosh)MozillaFirefox
fari3 及更高版本AppleSa
本(PC 和 Macintosh)Opera9 及更高版
GoogleChrome
另外,支持 JavaScript 的移动设备的浏览器亦可支持 Ext,如图 2.1 所示是诺基亚 E90 手
机上的截图。
图 2.1 高端手 内嵌的浏览器支持 JavaScript 1.5 机 Nokia E90
原来 Ext 也可以这样地用!ECMAScript 开拓了我们的眼界,也真正地拓展了 Ext 或者是
Ajax 程序的应用。
2.3 如何兼容其他 JavaScript 库
Ext 库具备全面的 API,尝试着为我们提供完整的整合开发平台,但是如果结合遗留项目
会存在着如何兼容其他 JavaScript 库的问题。为解决此问题,它采用了适配器(Adapter)模式
的策略,适配器另外还具备以下功能:
Ext 的开发阶段,其底层代码是依附其他 Jav 库。早期 aScript
Ext 的组件代码不是按其他 Ajax 库的风格写的。Adapter 会把其他 Ajax 库的代码转
换 自己风格的代 。
成 码
如图 2.2 所示,当前 Ext 为流行的 JavaScript 库提供了功能的转换,包括 Prototype.js,
jQeury 和 YahooUI!Library。
[
]
9
当最早期 Ext 还是作为 YahooUI!Library(简称 YUI)的 JavaScript 库的扩展的时候,它依
赖 YUI 的底层代码来处理跨浏览器的问题。现在 Ext 已经是独立、免依赖的库了(Standalone),
你可将 YUI Library 替换为另外你所选择的 JavaScript 库,如 Prototype.js、jQuery 或者是这
些之中的最佳选择,就是 Ext 自带的底层库。负责将这些库映射为其底层库的这部分代码,
我们称之为适配器(Adapters)。这部分源码位于 source/adapter 的子目录中,未压缩的版本
各适配器位于/adapters/<库名称>/。如果你在项目中遇到了库与库之间命名冲突、版本管理
等的情况,就必须使用相应的适配器。在使用过程中,应按照表 2.1 中的文件引入顺序来引
JavaScript 凌厉开发
ExtJS3 详解与实践
Ext JS
[
10
]
入文件。
图 2.2 与各底层库的关系
表 2.1 适配器文件引入顺序
适 配 器 文件引入顺序
Ext Stand-alone(Ext 独立适配器)
ext-base.js
ext-all.js
Yahoo! UI (0.12+)
yui-utilities.js
ext-yui-adapter.js
ext-all.js
jQuery (1.1+)
jquery.js
ext-jquery-adapter.js
ext-all.js
Prototype.js (1.5+) / Scriptaculous (1.7+)
prototype.js
scriptaculous.js?load=effects(指定的特效)
ext-prototype-adapter.js
ext-all.js
值得一提的是,除了先前发布的 Ext JS/Ext GWT,官方产品还发布了精简版 Ext Core,
它剔除了 Ext 框架中那些复杂的 UI 组件,把最常用的功能保留,例如 DOM 操作、Ajax/XHR、
事件、动画、模板、OO 机制……这些 Web 开发中寻常遇到的任务,被裁剪出来,形成迷你
版的 Core 发布。Core 基于 MIT 许可的开源协议,不同于 ExtJS 的 GPLv3,该 MIT 的协议自
由度更大、更彻底。
之所以存在相对独立的 ExtCore 和 ExtJS/ExtGWT,此做法显然是让受众群体觉得其分
工愈加明确。精简化之后一跃使 Ext 放在 jQuery/Prototype.js/Montools 同等的应用水平。有
关 JavaScript 库“尖端/日常”的应用分工,我们还会在第 3 章 3.3 节的“元素小结”中进行
详细的归纳与分析。
第 2 章Ext 起步
有趣的是,有别于 jQuery/Prototype.js/Montools 先有 Core 库再发展其 UI 库,这是一般
发展的顺序,Ext 则顺序颠倒,先有 UI 库后有 Core 库。不过还好 Ext 的架构中各单元布局合
理,各层次明晰,裁剪一个精简版的 Core 出来不见得是一件困难的事情。
2.4 如何学好 Ext 框架
正如每一道锁都配有一把钥匙去开启一样,我们总谋求在学习某一领域的过程中找到关键的
捷径,“不走弯路”是大多初学者的殷切诉求和诚挚盼望的事情,躲避“技术泡沫”也是老手们
所切记的,然而能否做到这两点?实际上每个人因自己的情况差异而不同。
接触 Ext 至少有一段时间了。根据作者对用户平时感受的观察,Ext 与同类型框架 Dojo
或者有着多少相仿的际遇:虽然是开源的却语法晦涩;HTML/CSS 属基本功但大家还是不愿
碰;JavaScript 也都在用,然而还是避之则吉……凡此等等的问题尽管不都是每个人都遇到,
而且业务上也有明确的分工,但至少总有挥之不去的抵触情结困扰着自己的学习信心,难道
真的没有方法能快速掌握这个框架吗?
非也。软件终究是人想出来怎么做的。——没有遵从某方面的经验法则,并且是成功的、
千锤百炼的法则,何以能做出手中的干将莫邪神兵利器?凭心而论,探求业务精练之道乃是
我辈之追求。可喜的是,Ext 不但没有背离当今主流的软件方法论,而且反复使用着这些理论、
体系。从另外一个角度讲,它是务求与我们的知识储备相吻合的,而不是旁门左道式的“脚
本编程(Hackiteverywhere)”——广大遵守 OO 的开发者应有此体会!
可见,今日的 Ext 之所以备受开发人员的垂青,除优秀的前端框架乏善可陈外(包括 Flex
的也统计在内),也与它们所使用的技术底子有很大的关系。拆开 Ext 的表面,究其筋骨处处
渗透着先进思想的影响。
提示:
Ext
是经典的
MVC
模式。
哪些是 DHTML 最佳实践?哪些是 Ajax 企业级应用?到 Ext 身上自然就不遑多论了。
总之,闪光的地方都是我们该学习的,并不因为开头所说的种种抵触而认为不值一谈,
而且需要真正掌握的,毕竟还是以继承方法 Ext.extend()为先。Ext 是通过继承很多现成的组
件来方便我 故此有必要先入为主地 xt.extend()。
们开发的, 谈谈 E
关于 Ext.extend(),其实是创建一个新类(Class)的方法,其方法形式为:
Ext.
extend(baseClass, SubClass, O errides)
11
v
第一个参数是父类,第二个参数是属性/函数的列表。第二个参数加入到对象的 prototype
中 extend 过后,Ext.extend 还会产生一个 superclass 的引用,用于访问父类的成员。这在下
面第二个类 Developer 中有演示。
[
]