ext js开发指导
TRANSCRIPT
加快入门速度，提高开发效率，促进风格统一
EXTJS开发指导
• 大部分人以前没有专门开发过Javascript。
• 对 AJAX理解不够深入。不清楚AJAX对于界面操作、开发效率带来什么优势。
• 只知道公司要用这个框架，自己也就要用这个框架。硬着头皮用。
• 简单了解 Extjs 的 API。开发实际应用时，从第一行代码开始自己写。遇到问题知道查询 API。
• 每个独立的功能模块，自己一个人设计，编码。造成每个人有自己的界面风格。
• 适合企业级复杂操作界面应用，不适合互联网页面。
• 具有丰富的标准组件和第三方组件 /插件，基本不需要自己再开发组件。
• 详尽的 API文档和说明，查询非常方便。
• 丰富的官方例子，把 Extjs能够实现的功能全部用代码实现了一遍。
• Extjs集成了 Yahoo UI框架的各点，具有“设计模式 (Desing pattern)”的概念。
EXTJS优势和我们现在利用现状的对比
Extjs的特点 我们现在的开发状况
下面从最佳实践的角度出发，提供一些开发上的参考，包括官方例子，第三方插件，开发调试工具，持续改进四部分。
最佳实践
最好的文档是代码。最生动的文档则是EXTJS的官方例子。
多参考官方样例
如何利用好官方例子
利用好官方例子的好处• 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的论坛非常活跃，这也是一个开源框架生命里的体现。
利用第三方插件
利用第三方插件
第三方插件举例• 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毕竟是一个针对互联网网站的界面设计模式总结，并不太适合企业应用。所以我们应该总结和归纳出公司自己的界面设计模式。
形成公司自己的设计模式库
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• 不说了
