`
nything
  • 浏览: 145026 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJS 开发总结

    博客分类:
  • OTS
阅读更多

 

1. ExtJS的定位是RIA,和Prototype、jQuery等类库的定位不同。使用ExtJS做开发,就是意味着以客户端开发为主,不然就不叫RIA框架了,而Prototype、jQuery等只是辅助性的客户端框架,和ExtJS不在同一条起跑先上。如果一定要和其它的框架做比较的话,应该和Isomorphic SmartClientBackbase Enterprise Ajax之类的框架做比较,当然,和他们相比,ExtJS还是有很大的优势的。

2. 使用ExtJS时需要解决如何服务端通信的问题。由于ExtJS只是一个客户端的框架,和服务端技术没有关系,也就没有相应的服务端的适配层,因此客户端如果要用ExtJS,则必须提供它需要的数据结构。ExtJS主要通过这几种方式和服务端进行通信:

  • Ext.Ajax.request 做普通的异步请求,服务端可以根据实际情况返回JSON形式数据或者HTML片段;
  • Ext.tree.TreeLoader 加载树形结构,服务端必须返回JSON形式数据,而且要符合Ext.tree.TreeNode的配置要求,否则自己做转换;
  • Ext.data.Store及其派生类 加载表格形式的数据,服务端可以根据实际情况返回JSON形式数据或者XML形式数据,如果没有特殊要求,推荐返回JSON格式的数据;
  • Ext.Element.update 局部更新,这个方法最总还是要调用Ext.Ajax.request方法,之所以把它单独列出来,是因为这种方式比较容易被忽视,但是在某些情况下还是挺有用的,比如调用Ext.Panel.body.update()对某个Ext.Panel的内容进行局部更新,如果使用这种方式,那么服务端只能相应的返回HTML片段了;

3. 使用ExtJS时的注意事项。ExtJS和其它的辅助性类库(Prototype、jQuery等)相比显得非常庞大,让很多很多初学者望而却步。经过近一年的学和用,对于ExtJS的使用,我总结了一下几个注意事项:

  • 尽量使用ExtJS的方言。 ExtJS提供了很多有用的方法,解决客户端JavaScript常见的开发任务,常见的有查询HTMLDom,创建HTML元素,为HTML元素注册事件响应函数等,这些大可以全部使用ExtJS提供的方法,使自己代码构建与ExtJS之上,举几个例子:
    • 查询ID为container的DIV下所有的checkbox,可以使用:Ext.fly(‘container’).select(‘input[type=checkbox]’);
    • 在ID为container的DIV内创建一个按钮,可以使用:Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
    • 为ID为container的DIV的click事件注册处理函数,使用:Ext.fly(‘container’).on(‘click’, handlerFn, scope);
  • ExtJS的自定义事件很好用,可以实现一对多的通知,而且任何自定义事件都可以中途停止,只要有一个处理函数返回false。
  • Store合并成一个文件 用ExtJS显示数据,自然就需要用到Ext.data.Store及其派生出来的类,可以考虑所有的Store合并到一个文件,这样对重用有很大的帮助。
  • 脚本文件管理 尽可能的每个模块做成一个类,一个类一个文件,类似与Java或C# 的文件处理方法,每个文件注明其作用,依赖的文件等,如果太多的话可以考虑写一个配置文件,通过读配置文件来输出脚本到客户端。
  • 调试和部署分别加载Debug和Release版本的脚本 ExtJS附带的例子中没有使用完整Debug版本的例子,所以很多人找不到完整的Debug版本的引用顺序,通过对Source文件夹下的ext.jsb文件进行分析,就可以得到正确的加载顺序,如下:
    • Debug
      1. /ext-path/source/core/ext.js
      2. /ext-path/source/adapter/ext-base.js
      3. /ext-path/ext-all-debug.js
    • Release
      1. /ext-path/adapter/ext/ext-base.js
      2. /ext-path/ext-all.js
  • 对Script进行压缩 对项目中有大量的JavaScript的话,对其进行压缩是很有必要的,这里我推荐的是ExtJS的论坛提供的JS Builder,可以通过配置文件来对Script和CSS进行压缩,据说ExtJS就是用这个工具进行压缩的,不过有一个缺点,就是不支持UTF-8编码。

 

4. ExtJS的优点和缺点总结。经过近一年的尝试,ExtJS的优缺点总结如下:

  • 优点
    • 一致的类库 这点在1.1版本时还不是很完善,但是到了2.0以后,ExtJS内部经过了翻天覆地的变化,特别是UI组件,有统一的基类,给人的感觉很像是一个运行在浏览器上的运行时框架,这一点只有在对ExtJS熟练了之后才能体会到。
    •  托管页面呈现 ExtJS在发展到2.0之后,不仅UI类库一致了,而且渲染方式也是统一的,用官方的话说,是Managed Rendering,这一点使得UI的扩展也比较一致,有利于以后的维护与发展。
    • 相对丰富的文档和示例 毫无疑问,刚刚接触到ExtJS的人多数都是被它附带的例子和开发文档吸引过去的,它的文档做的确实不错。
    • 华丽而成熟的界面 ExtJS在2.0之后的界面真的是没得说,不仅华丽,而且相对很成熟。
  • 缺点
    • 没有合适的开发利器 毫无疑问,一个好的开发工具可以大大的提高编码的速度,但是对于ExtJS,始终没有一个完美的开发工具,可以推荐的有Aptana StudioSpket IDE,和Spket 提供的提示文件,但是都是各有优缺点,都不完美,只能一边看SDK一边写代码。
    • 没有界面设计工具 虽然有人提供了一个在线的界面设计工具,但是和Visual Studio提供的ASP.Net设计工具来说,真的可以说是天壤之别。因此,只能一边预览,一边写代码。
    • 文档不全 虽然ExtJS提供的文档很丰富,但是还是跟不上源代码的更新速度,所以,经常要通过看源代码,调试才能真正解决问题。
    • 不能编译 这一点可以说是JavaScript的缺点(如果能编译,就不叫JavaScript了),在实际的开发中,经常会敲错一些代码,比如大小写错误等,不能通过编译得到反馈,只能在运行时排错,导致开发的效率比较低下。

5. 使用ExtJS做应用的一些建议。多数人认为ExtJS的脚本体积很大,不适合放到互联网上,对于这一点,有如下建议:

  1. 部署到互联网上的Web应用一定要加载Release版本的ExtJS
  2. 可以考虑只加载必须的组件,build目录下脚本文件都是压缩过的,如果项目中用到的ExtJS的组件不是很多,可以只加载用到的
  3. 考虑使用IIS的文件压缩功能
  4. 使用Google的Gears,把所有的静态文件做客户端缓存
  5. 使用ADOBE的AIR,把脚本打包到客户端运行

 

总的来说,ExtJS是一个不错的框架,它陪伴我走过了精彩的2008,也许在未来的2009,我会转向其它的RIA技术,但是我至少会继续关注ExtJS,同时也希望这个框架能够顽强的生存下去。

PS,共享一些学习资料:

ref:http://www.cnblogs.com/beginor/archive/2008/12/14/1354922.html

分享到:
评论

相关推荐

    EXTJS开发总结.pdf

    在EXTJS开发中,与服务器端的通信是一个关键问题。EXTJS不自带服务器端适配层,因此需要开发者自行处理数据结构。主要的通信方式包括: 1. 使用`Ext.Ajax.request`进行异步请求,服务器可以返回JSON或HTML片段。 2. ...

    Extjs开发总结(转).pdf

    ExtJS是一种富互联网应用(RIA)开发框架,专注于构建客户端应用程序。与Prototype和jQuery等轻量级库不同,ExtJS提供了完整的组件模型和丰富的用户...在实际项目中,不断学习和总结经验,是提升ExtJS开发技能的关键。

    EXTJS开发总结[参考].pdf

    EXTJS与服务器端的通信是开发过程中必不可少的一环。由于EXTJS本身并不涉及服务器端技术,因此开发者需要确保服务器返回的数据格式符合EXTJS的要求。EXTJS提供了多种方式进行数据交互: 1. `Ext.Ajax.request`:...

    ExtJs 开发指南书籍 实例 可视化工具

    5. **ExjsHotel.rar**:这个可能是基于ExtJs开发的一个酒店预订系统的示例项目,开发者可以从中学习到如何构建一个完整的业务应用,包括如何组织代码、如何实现交互逻辑、如何处理用户输入等。 6. **extjs实用开发...

    ExtJS开发插件及Ext包

    总结,ExtJS开发插件和管理Ext包是构建高效、可扩展的Web应用的关键技术。通过学习和熟练掌握这些技能,开发者能够利用ExtJS的强大功能构建出功能丰富、用户体验优秀的应用程序。同时,利用如Spket这样的专业IDE,...

    php+ExtJS 开发实战

    - **最佳实践**: 分享了一些在开发过程中积累的最佳实践,包括代码优化、性能提升等方面的经验总结。 #### 6. 学习资源与进阶指南 对于初学者来说,本书不仅提供了详细的理论介绍,还附带了丰富的实践指导。 - **...

    asp.net与extjs开发点卡在线销售系统__0525.rar

    总结,这个“asp.net与extjs开发点卡在线销售系统”项目展示了如何结合两种技术构建一个完整的电子商务平台,涵盖了前端交互、后端处理、数据管理等多个方面,对于学习ASP.NET和EXTJS的开发者来说,是一个很好的实践...

    extjs网页控件开发

    ExtJS是一种基于JavaScript的...总结起来,"extjs网页控件开发"涵盖了ExtJS的核心技术,包括图表的创建和多级联动下拉列表框的实现。通过深入学习和实践,不仅可以提高开发效率,还能打造出具有专业水准的Web应用程序。

    EXTJS Grid总结例子

    EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...

    Extjs 各种总结和新实例

    本人对extjs 各种开发的亲身总结,包括多种列表、树、以及很多扩展功能

    合同管理系统 extjs开发的 让大家一起学习

    总结,EXTJS为合同管理系统的开发带来了高效、灵活和丰富的用户界面,通过其强大的功能,可以打造出满足企业需求的合同管理平台,提升企业的合同管理效率和规范化程度。无论是前端界面设计还是后台数据交互,EXTJS都...

    extjs 总结

    EXTJS 是一种基于 JavaScript 的前端框架,主要用于...在实际开发中,开发者可以根据需求自定义扩展这些组件,以满足复杂的应用场景。同时,EXTJS 提供了良好的API文档和社区支持,方便开发者进行深入学习和问题解决。

    action+extjs开发

    总结来说,Action+ExtJS开发是将Java后端的业务处理能力和JavaScript前端的用户交互优势相结合,提供高性能、交互性强的Web应用解决方案。开发者需要熟练掌握Struts2框架以及ExtJS库,了解MVC模式,理解HTTP请求响应...

    搭建利用Extjs库开发的环境

    为了更好地利用Extjs进行开发,本文将详细介绍如何在Spket IDE中配置Extjs开发环境,使得开发者能够享受到强大的代码提示与调试支持,提高开发效率。 #### 二、准备工作 在开始配置前,请确保以下条件已满足: 1. ...

    ExtJS3总结内容

    ### ExtJS3总结内容:深入理解xtype与vtype #### 概述 在ExtJS3框架中,`xtype`与`vtype`是两个关键的概念,它们分别用于组件类型的标识和表单验证规则的定义。本文将详细介绍`xtype`的使用,以及其在ExtJS3组件...

    extjs实用开发指南

    从组件使用、MVC架构、数据绑定到事件处理、AJAX通信,以及主题定制和响应式设计,这本书将涵盖EXTJS开发的各个方面,是提升EXTJS技能和理解的宝贵资源。通过阅读并实践其中的示例,开发者能够掌握EXTJS的核心概念和...

    EXTJS4开发的图片文章管理项目实例

    总结来说,这个EXTJS4开发的图片文章管理项目实例展示了前端EXTJS4的强大UI构建能力,后端JAVA的稳定处理性能,以及MYSQL数据库的数据存储功能。通过学习这个实例,开发者可以深入理解EXTJS4的MVC架构,JAVA的Web...

    ExtJS 图形开发工具

    通过这款工具,开发者可以创建模型、控制器、视图和存储,同时实时查看应用程序的外观和行为,大大简化了ExtJS开发过程。 总结来说,"ExtJS 图形开发工具"是面向ExtJS开发者的强大助手,通过可视化设计和代码生成,...

    EXTJS与.NET开发

    总结来说,EXTJS为.NET开发者提供了强大的前端开发工具,使他们能够创建出功能丰富、用户体验优秀的Web应用。通过理解并熟练掌握EXTJS与.NET的集成技术,开发者可以提高开发效率,同时提升应用程序的性能和用户体验...

Global site tag (gtag.js) - Google Analytics