`
icrwen
  • 浏览: 266598 次
  • 性别: Icon_minigender_2
  • 来自: 济南
社区版块
存档分类
最新评论

extjs总结

阅读更多
1. ExtJS的定位是RIA,和Prototype、jQuery等类库的定位不同。使用ExtJS做开发,就是意味着以客户端开发为主,不然就不叫RIA框架了,而Prototype、jQuery等只是辅助性的客户端框架,和ExtJS不在同一条起跑先上。如果一定要和其它的框架做比较的话,应该和Isomorphic SmartClient、Backbase 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之上,举几个例子:
          o 查询ID为container的DIV下所有的checkbox,可以使用:Ext.fly(‘container’).select(‘input[type=checkbox]’);
          o 在ID为container的DIV内创建一个按钮,可以使用:Ext.fly(‘container’).createChild({ tag: ‘input’, type: ‘button’});
          o 为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文件进行分析,就可以得到正确的加载顺序,如下:
          o Debug
               1. /ext-path/source/core/ext.js
               2. /ext-path/source/adapter/ext-base.js
               3. /ext-path/ext-all-debug.js
          o 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的优缺点总结如下:

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

相关推荐

    extjs 总结

    EXTJS 是一种基于 JavaScript 的前端框架,主要用于构建富客户端应用程序。它提供了一套完整的组件库,包括用于创建各种用户界面元素的类,如表格、窗口、菜单、表单等。在EXTJS中,TreePanel是用于展示树形数据结构...

    extjs总结.docx

    EXTJS 是一种基于 JavaScript 的富客户端框架,常用于构建企业级的 Web 应用程序。在EXTJS中,我们可以利用其强大的组件模型和数据绑定机制,构建复杂的用户界面。以下是一些EXTJS的关键知识点: 1. **配置对象**:...

    extjs总结.pdf

    【EXTJS 概述】 EXTJS 是一个强大的 JavaScript 框架,主要用于构建富客户端的 Web 应用程序。它的核心特性包括可扩展的组件模型、丰富的用户界面和数据绑定机制。EXTJS 提供了大量的预定义组件,如表格、表单、...

    extjs 总结,可以方便大家开发

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的前端应用程序。它提供了一整套组件,包括表格、面板、窗口、树形控件等,帮助开发者构建交互式、响应式的Web应用。以下是对标题和描述中提到的知识点的详细...

    extjs总结资源文件

    EXTJS 是一个流行的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括网格、表单、工具栏、菜单等,使得开发者能够创建功能强大的交互式用户界面。以下是对EXTJS资源文件中涉及的菜单和工具...

    EXTJS总结.txt

    一、获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存...

    EXTJS学习例子总结

    学习EXTJS总结的例子,里面含有Grid以及ExtJs扩展的例子源码...

    EXTJS Grid总结例子

    本总结例子将深入探讨EXTJS Grid的核心特性和使用方法,通过源代码分析,帮助开发者更好地理解和应用EXTJS Grid。 一、EXTJS Grid的基本结构 EXTJS Grid由多个部分组成,包括Store(数据存储)、Columns(列配置)...

    Extjs学习—总结的extjs的一些常用小知识点

    ### Extjs 学习——总结的一些常用知识点 #### 一、概述 Extjs 是一个用于构建 Web 应用程序的强大框架,它提供了大量的 UI 组件和功能,可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验,...

    EXTJS开发总结.pdf

    EXTJS是一种专为Rich Internet Applications (RIA)设计的前端JavaScript框架,它的主要定位与Prototype、jQuery等轻量级库截然不同。EXTJS注重客户端的复杂应用开发,提供了丰富的组件和功能,使得开发者能够构建出...

    Extjs 各种总结和新实例

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

    项目总结+项目心得体会

    "Extjs总结.doc"可能是个人或团队在使用ExtJS进行开发后的经验总结,可能包括最佳实践、常见问题、性能优化等方面的笔记,对于后续使用ExtJS的开发者有很高的参考价值。 "标签.doc"可能涉及的是Web开发中的标签系统...

    ExtJS3总结内容

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

    extJs 2.1学习笔记

    目录 1. ExtJs 结构树 2 ...25. extJs 2.0学习笔记(Ext.Element API总结) 69 26. extJs 2.0学习笔记(Element.js篇) 73 27. extJs 2.0学习笔记(DomHelper.js篇) 76 28. extJs 2.0学习笔记(ext.js篇) 77

    extjs4.2 desktop 拓展

    总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...

    extjs各种常用组件归纳总结

    extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    总结来说,EXTJS3.0的树形组件提供了一种直观且可编辑的方式来展示层次结构数据,其丰富的API和编辑功能使得开发者能构建出高度交互和定制化的应用程序。通过深入学习和实践EXTJS实例,我们可以更好地掌握这一强大的...

    myeclipse中使用extjs缓慢 卡死 白屏 解决方法总结

    ### MyEclipse中使用ExtJS出现缓慢、卡死、白屏问题及解决方法总结 在进行Web开发时,经常会遇到一些工具与框架不兼容或配置不当导致的问题,这些问题往往会影响到开发效率。本文将针对在MyEclipse环境中使用ExtJS...

    Extjs6示例中文版

    总结 综上所述,《Extjs6示例中文版》不仅提供了详细的ExtJS6教程,还分享了作者的实践经验和个人见解,这对于想要深入学习和掌握ExtJS6的开发者来说是一份宝贵的资源。通过学习本书,读者不仅可以了解ExtJS6的...

Global site tag (gtag.js) - Google Analytics