Recommended
More Related Content
Viewers also liked
Viewers also liked (20)
Similar to Ext Js开发指导
Similar to Ext Js开发指导 (20)
Ext Js开发指导
- 2. 大部分人以前没有专门开发过Javascript。 对AJAX理解不够深入。不清楚AJAX对于界面操作、开发效率带来什么优势。 只知道公司要用这个框架，自己也就要用这个框架。硬着头皮用。 简单了解Extjs的API。开发实际应用时，从第一行代码开始自己写。遇到问题知道查询API。 每个独立的功能模块，自己一个人设计，编码。造成每个人有自己的界面风格。 适合企业级复杂操作界面应用，不适合互联网页面。 具有丰富的标准组件和第三方组件/插件，基本不需要自己再开发组件。 详尽的API文档和说明，查询非常方便。 丰富的官方例子，把Extjs能够实现的功能全部用代码实现了一遍。 Extjs集成了YahooUI框架的各点，具有“设计模式(Desing pattern)”的概念。 Extjs优势和我们现在利用现状的对比 Extjs的特点 我们现在的开发状况
- 5. 如何利用好官方例子 http://www.extjs.com/deploy/dev/examples/samples.html阅读下面几页是，请对照这个链接的内容。 在开发一个功能模块，或者一个界面的一个组件时，例如一棵树，一个表单，一个列表，等等。 首先从例子中寻找一个最接近你目前功能的，然后把例子的代码Copy到你的工程中。在例子的基础上修改，直到完成你的实际功能。 一个整页应用(OPOA，一个页面里是一个整个的Extjs界面)，首先去官方例子的布局类，里寻找你需要的布局，然后在布局里添加其他单个例子。 往往，例子本身的功能就已经基本完成了你实际功能的很大一部分。 学会利用别人的成果。软件开从来就不讲究完全自力更生。 Extjs官方的例子，是Extjs核心开发团队(Core Team)创作的。不是像你我这样的一般人写的。所以他对某一个功能的实现方式最标准，最权威。
- 6. 利用好官方例子的好处 Extjs官方的例子，本身不仅仅演示了功能如何实现。更是一种良好代码风格的体现。从例子的基础上修改，还能确保你的代码风格更清晰。我们所有人的编码风格都向官方靠拢，这本身就有利于团队协作，增加代码的可读性和可维护性。 Copy了官方的例子，也就等于Copy了官方的界面设计风格。比如，一个树或者表格的功能我们都Copy字官方的例子，那么我们的界面风格自然就保持了一致！ Google的大部分开源项目，都会提供编码风格标准。要求向这个项目贡献代码的人必须保持同样的代码风格。这是一种很好的模式。
- 7. Lego风格的开发
- 8. Lego风格的开发 Lego风格的开发，就是说：基本组件都已经有了。你需要的只是那类这些模块进行拼装。 在Extjs中惊醒Lego风格的开发 首先在例子库的LayoutManager类中，寻找你需要的布局。 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
- 10. 利用第三方插件 第三方扩展和插件 http://www.extjs.com/forum/forumdisplay.php?f=42(Extjs2) http://www.extjs.com/forum/forumdisplay.php?f=21 (Extjs3) 我在第一个Extjs应用，也就是基于WeblogicContentAPI的内容管理中，大概用了十几个Extjs的第三方插件。包括附件上传，Grouping Grid，Search，TinyMCE可视化文本编辑等等。 Extjs是一个开源项目。这就是说，Extjs的代码并不全部由Extjs的核心团队贡献。Extjs的每一次升级，都会把非常成熟和功能强大的第三方插件并入自己的代码。 从一开始用Extjs2.0RC版，到2.3版，再到现在的3.0.3和即将发布的3.1版本可以看出这个特点。上一个版本发布后，论坛中加入的一些成熟插件，都会被官方 并入下一个版本。 而论坛中的插件，都是从实际项目中来的，非常实用的功能。往往是因为正是版本中没有这个功能，而水平高的开发人员在项目中需要这个功能，又等不及核心团队去实现这个功能。才会有人自己写插件。 这些插件，往往同时具备详尽文档说明和Demo。
- 11. 第三方插件举例 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
- 13. 用户界面设计模式(UI Design Pattern) 第一次听说用户界面设计模式，是在学习YUI的过程中。我在一次培训中也提到过。http://developer.yahoo.com/ypatterns/ 在软件开发过程中，解决一些实际问题是并没有明确的对的方法和错的方法。只有在解决这类问题时，有一些通用的比较成熟的方法。这些通用的，成熟的方法被称为设计模式。 在界面设计上也是同样。Yahoo，在自己的网站建设过程中总结归纳出一些界面设计上解决某一类操作行为时通用的和成熟的设计模式。并且开放出来供世界其他界面设计人员参考。这就是YahooDesign Pattern。 但是，YDP毕竟是一个针对互联网网站的界面设计模式总结，并不太适合企业应用。所以我们应该总结和归纳出公司自己的界面设计模式。
- 14. 形成公司自己的设计模式库 我们自己总结界面设计模式时，可以参考YDP的分类，文档组织等等。 Extjs源于Yahoo UI，所以Extjs官方例子库，其实也是一个设计模式的库。 我们要做的，就是继续官方例子的基础上，形成我们公司自己的样例库。作为官方样例的一个扩展。这些样例留好接口，文档和扩展说明。 对于所有软件公司来说，这样的库是项目实践的总结，开发人员劳动的成果。也是公司重要资产。
- 16. 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。
- 17. 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>
- 19. Extjs自己的可视化开发工具 这个可视化开发工具，按照原来Extjs的RoadMap，应该是在几年6月份的3.0版本是发布。但是现在延期到3.1版本是发布。 3.1版本，按照RoadMap，应该在11月初发布(Earlier November,2009)。由于3.1版本有很多重要的升级和性能改进，二现在已经是earlier December了。所以很多人(问具体发布时间的帖子长达5页了)都在论坛里问具体的发布时间。应该在最近就会发布。 我们将关注这个Extjs的可视化开发工具。主要关注一下几点： 是否能够像承诺的那样，做到方便的拖拽实现编码。 是否支持逆向，也就是说修改过的编码再同步反应到界面。 除了官方的可视化开发工具外，还有其他第三方提供的同样的工具： http://extjs.org.cn/node/329
- 21. Extjs的升级 从我第一个用Extjs2.0 RC开发项目(07年底)开始到现在，已经过去两年时间。这两年AJAX技术得到了前所未有的发展，Extjs也即将升级到了3.1版本。 从我们确定用Extjs2开发的时候，用2.2版本。到现在的3.1，我们从来没有考虑过跟随主流一起升级。 如果跟随主流不断升级，每一次升级的代价都不大。但是目前来说，从2.2/2.3升级到3.1，可能会有难度。 但是3.1带来的功能和性能改进确实非常有用。
- 23. 问题反馈 Email: chenlong@Tsinghuatec.com Wave: chenlong365@googlewave.com