Ext Js开发指导

加快入门速度，提高开发效率，促进风格统一

EXTJS开发指导

• 大部分人以前没有专门开发过Javascript。

• 对 AJAX理解不够深入。不清楚 AJAX对于界面操作、开发效率带来什么优势。

• 只知道公司要用这个框架，自己也就要用这个框架。硬着头皮用。

• 简单了解 Extjs的 API。开发实际应用时，从第一行代码开始自己写。遇到问题知道查询 API。

• 每个独立的功能模块，自己一个人设计，编码。造成每个人有自己的界面风格。

• 适合企业级复杂操作界面应用，不适合互联网页面。

• 具有丰富的标准组件和第三方组件/插件，基本不需要自己再开发组件。

• 详尽的 API文档和说明，查询非常方便。

• 丰富的官方例子，把 Extjs能够实现的功能全部用代码实现了一遍。

• Extjs集成了 Yahoo UI框架的各点，具有“设计模式 (Desing pattern)”的概念。

EXTJS优势和我们现在利用现状的对比

Extjs的特点 我们现在的开发状况

下面从最佳实践的角度出发，提供一些开发上的参考，包括官方例子，第三方插件，开发调试工具，持续改进四部分。

最佳实践

最好的文档是代码。最生动的文档则是EXTJS的官方例子。

多参考官方样例

如何利用好官方例子• http://www.extjs.com/deploy/dev/examples/samples.html 阅读下面几页是，请对照这个链接的内容。

• 在开发一个功能模块，或者一个界面的一个组件时，例如一棵树，一个表单，一个列表，等等。

• 首先从例子中寻找一个最接近你目前功能的，然后把例子的代码 COPY到你的工程中。在例子的基础上修改，直到完成你的实际功能。

• 一个整页应用 (OPOA，一个页面里是一个整个的 Extjs界面 )，首先去官方例子的布局类，里寻找你需要的布局，然后在布局里添加其他单个例子。

• 往往，例子本身的功能就已经基本完成了你实际功能的很大一部分。• 学会利用别人的成果。软件开从来就不讲究完全自力更生。• Extjs官方的例子，是 Extjs 核心开发团队 (Core Team)创作的。不是像你我这样的一般人写的。所以他对某一个功能的实现方式最标准，最权威。

利用好官方例子的好处• Extjs官方的例子，本身不仅仅演示了功能如何实现。更是一种良好代码风格的体现。从例子的基础上修改，还能确保你的代码风格更清晰。我们所有人的编码风格都向官方靠拢，这本身就有利于团队协作，增加代码的可读性和可维护性。

• Copy了官方的例子，也就等于 Copy了官方的界面设计风格。比如，一个树或者表格的功能我们都 Copy 字官方的例子，那么我们的界面风格自然就保持了一致！

• Google的大部分开源项目，都会提供编码风格标准。要求向这个项目贡献代码的人必须保持同样的代码风格。这是一种很好的模式。

LEGO风格的开发

LEGO风格的开发• Lego风格的开发，就是说：基本组件都已经有了。你需要的只是那类这些模块进行拼装。

• 在 Extjs 中惊醒 Lego风格的开发• 首先在例子库的 Layout Manager类中，寻找你需要的布局。• http://www.extjs.com/deploy/dev/examples/samples.html#sample-7

• 然后在其他例子中寻找组件，填充这个布局。• 然后，用你的代码把这些组件粘合起来。再加上实际功能需要的其他代码。

• Extjs例子中的 Combination Samples 中的现成应用，其实就是这样一个 lego开发方式的结果。 Combination就是组装、合成的意思。• http://www.extjs.com/deploy/dev/examples/samples.html#sample-0

EXTJS的论坛非常活跃，这也是一个开源框架生命里的体现。

利用第三方插件

利用第三方插件• 第三方扩展和插件

• http://www.extjs.com/forum/forumdisplay.php?f=42 (Extjs2)

• http://www.extjs.com/forum/forumdisplay.php?f=21 (Extjs3)

• 我在第一个 Extjs应用，也就是基于 Weblogic Content API的内容管理中，大概用了十几个 Extjs的第三方插件。包括附件上传， Grouping Grid， Search， Tiny MCE 可视化文本编辑等等。

• Extjs是一个开源项目。这就是说， Extjs的代码并不全部由 Extjs的核心团队贡献。 Extjs的每一次升级，都会把非常成熟和功能强大的第三方插件并入自己的代码。

• 从一开始用 Extjs2.0 RC 版，到 2.3 版，再到现在的 3.0.3和即将发布的 3.1 版本可以看出这个特点。上一个版本发布后，论坛中加入的一些成熟插件，都会被官方 并入下一个版本。

• 而论坛中的插件，都是从实际项目中来的，非常实用的功能。往往是因为正是版本中没有这个功能，而水平高的开发人员在项目中需要这个功能，又等不及核心团队去实现这个功能。才会有人自己写插件。

• 这些插件，往往同时具备详尽文档说明和 Demo。

第三方插件举例• Extjs集成 TinyMCE 可视化编辑器的扩展：

• 论坛里的帖子： http://www.extjs.com/forum/showthread.php?t=24787

• Demo ： http://blogs.byte-force.com/xor/tinymce/index.html

• 代码： http://blogs.byte-force.com/media/g/tinymce/default.aspx

• Extjs 中集成 Iframe的扩展：• 论坛里的帖子： http://www.extjs.com/forum/showthread.php?t=71961

• Demo

• http://demos.theactivegroup.com/demodesk.html?demo=mif&script=mifsimple

• http://demos.theactivegroup.com/demodesk.html?demo=mif&script=treenav

设计模式，不仅仅是 GOF四人组的那 23种，也不仅仅是编码实现的设计模式。界面风格也同样有自己的设计模式。

形成公司自己的设计模式

用户界面设计模式 (UI DESIGN PATTERN)• 第一次听说用户界面设计模式，是在学习 YUI的过程中。我在一次培训中也提到过。 http://developer.yahoo.com/ypatterns/

• 在软件开发过程中，解决一些实际问题是并没有明确的对的方法和错的方法。只有在解决这类问题时，有一些通用的比较成熟的方法。这些通用的，成熟的方法被称为设计模式。

• 在界面设计上也是同样。 Yahoo，在自己的网站建设过程中总结归纳出一些界面设计上解决某一类操作行为时通用的和成熟的设计模式。并且开放出来供世界其他界面设计人员参考。这就是 Yahoo Design Pattern。

• 但是， YDP 毕竟是一个针对互联网网站的界面设计模式总结，并不太适合企业应用。所以我们应该总结和归纳出公司自己的界面设计模式。

形成公司自己的设计模式库• 我们自己总结界面设计模式时，可以参考 YDP的分类，文档组织等等。• EXTJS源于 YAHOO UI，所以 EXTJS官方例子库，其实也是一个设计模式的库。• 我们要做的，就是继续官方例子的基础上，形成我们公司自己的样例库。作为官方样例的一个扩展。这些样例留好接口，文档和扩展说明。

• 对于所有软件公司来说，这样的库是项目实践的总结，开发人员劳动的成果。也是公司重要资产。

JAVASCRIPT的开发和调试是限制 JS开发效率的难题。但是也有解决办法。

开发和调试工具

EXTJS 推荐的开发和调试工具• 官方推荐的开发和调试工具，最早见于 Extjs 的 Blog ：

http://www.extjs.com/blog/2008/02/01/ides-plugins-and-tools-for-ext-js-20/

• 像文档中提到的 Aptana开发工具，已经内置了 Extjs的库。方便你直接生成基于 Extjs的项目。

• 我们在项目开发中，往往把前台浏览器里静态程序文件 (js,css)和后台服务器端程序放在一个开发工具中开发。这一点最好改进一下。• 用专门开发客户端的开发工具，例如 Aptana开发。并且用 Mock方法，模

拟后台相应。当需要访问后台接口是，只需要读取一个本地 JSON/XML文档获取数据即可。

• 用专门开发服务器端的开发工具，开发后台应用。去实现功能。• 最后联合测试时，用后台程序的实际访问地址，替代原来读取本地静态

JSON/XML。

FIREBUG的使用• 最重要的调式工具，毫无疑问还是 Firebug。 http://getfirebug.com

• 但是很多人会误解，认为 Firebug只能用在 Firefox 浏览器里。其实所有浏览器都可以使用。这一点特别对我们有用，因为我们的应用最终要运行在 IE 中，特别特别是要运行在已经严重影响了互联网历史进程的 IE6 中 (IE6已经影响了整个互联网的发展，这一点微软自己也承认 )。

• 其他非 Firefox 浏览器使用 Firebug的方式在 http://getfirebug.com/lite.html。方法很简单：• 把 <script type=‘text/javascript’ src=‘http://getfirebug.com/releases/lite/1.2/firebug-

lite-compressed.js’></script>这行 js 引用放入你想调试的页面。• 如果你不能上网，比如在服务器上调试。那么就把

http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js文件保存在本地。• 在页面内加入这行，还可以改变 Firebug调试窗口的大小 <script

type="text/javascript"> firebug.env.height = 500; </script>

EXTJS自己的可视化开发工具

就像你用 DreamWeaver开发 HTML一样， Extjs官方的可视化开发工具支持拖拽组件完成编码。

EXTJS自己的可视化开发工具• 这个可视化开发工具，按照原来 Extjs的 Road Map，应该是在几年 6 月份的

3.0 版本是发布。但是现在延期到 3.1 版本是发布。• 3.1 版本，按照 Road Map，应该在 11 月初发布 (Earlier November,2009)。由于

3.1 版本有很多重要的升级和性能改进，二现在已经是 earlier December了。所以很多人 (问具体发布时间的帖子长达 5页了 ) 都在论坛里问具体的发布时间。应该在最近就会发布。

• 我们将关注这个 Extjs的可视化开发工具。主要关注一下几点：• 是否能够像承诺的那样，做到方便的拖拽实现编码。• 是否支持逆向，也就是说修改过的编码再同步反应到界面。

• 除了官方的可视化开发工具外，还有其他第三方提供的同样的工具：• http://extjs.org.cn/node/329

并不是说选择了什么，就不会再改变。升级和改进是软件开发永远的话题。

持续改进 ( 话题之外的话 )

EXTJS的升级• 从我第一个用 Extjs2.0 RC开发项目 (07 年底 )开始到现在，已经过去两年时间。这两年 AJAX 技术得到了前所未有的发展， Extjs也即将升级到了 3.1 版本。

• 从我们确定用 Extjs2开发的时候，用 2.2 版本。到现在的 3.1，我们从来没有考虑过跟随主流一起升级。

• 如果跟随主流不断升级，每一次升级的代价都不大。但是目前来说，从2.2/2.3 升级到 3.1，可能会有难度。

• 但是 3.1带来的功能和性能改进确实非常有用。

过度到 GWT，也就是 GXT• 不说了

问题反馈• Email: [email protected]

• Wave: [email protected]