1.3 Ext JS 4概述1.令人兴奋的Ext JS 4曾经笔者以为Ext JS会止步于Ext JS 3，而全力投身于移动开放领域。而且HTML 5的强势出现，在笔者看来，会对JavaScript框架带来一定的冲击，Ext JS前景不太乐观。想不到在2010年年底，在Sencha博客上出现一篇名为《Ext JS 4 Preview: Refactoring & Standardizing the Rendering Process》的文章，才知道，Ext JS即将发布新版本，而且新版本不是简单地在Ext JS 3基础上增加新功能，而是完全重构，以获得更好性能。在持续的等待中，Sencha博客不断有介绍Ext JS 4的文章发表，在这些文章中逐渐明晰了Ext JS 4的改变，而这些改变，每一项都是那么令人兴奋。
Ext JS 3与Ext JS 4的兼容问题Ext JS 4因为框架重构，使用Ext JS 3开发的应用程序如果要平滑转移到Ext JS 4平台上，工作量是巨大的，如何才能实现两者间的兼容，让已有的Ext JS 3项目可以使用Ext JS 4呢？Ext JS 4团队提供了以下两种方法：JS兼容层：为Ext JS 3提供一个可选的JavaScript文件，其作用是在Ext JS 4加载后，为Ext JS 3代码提供别名和重写功能，从而让许多Ext JS 3代码能在Ext JS 4中正确运行。沙盒模式：实际就是将Ext JS全局对象名称修改为Ext 4，这样就不会与Ext JS 3产生冲突了。这样，两个版本的Ext JS就可在同一个页面使用。详细情况可浏览Ext JS 4包中的“Ext JS 3 & 4 on one page ”示例。3.新的类系统在2011年1月19日的博客文章《Count-down to Ext JS 4: Dynamic Loading and New Class System》中，出现了如图1-5所示的新的类图。从图中可以看到类系统在原有的基础上添加了mixin和require这两个新特性。实际新特性还有不少，请看下面的新特性列表：使用Ext.define替代Ext JS 3中的Ext.extend来定义新类。实现类的自动依赖管理，以便实现动态加载。
通过Mixins将一些特殊功能添加到类中，如图1-5所示的通过Mixins功能为Window添加了拖放和缩放功能。可创建类似Java或C#中的静态类（Statics）。可为配置选项自动生成set和get方法。定义类的时候，如果需要，可自动生成命名管道，而不是像Ext JS 3一样，需要先定义命名管道，之后才可以定义类。动态加载。4.动态加载动态加载的作用就是根据应用程序需要加载相应的脚本文件，而不是一次性加载所有脚本或加载一个保护全部功能的框架文件。其主要目的就是提高页面加载速度。Ext JS 4有一个完整的类依赖图，在加载某个类的时候，会依据依赖图递归下载所需的类文件，从而使应用程序正确运行。实现此功能的要点就是在定义类的时候，设置类的requires或uses属性。两个属性的区别在于uses属性只是使用到该类，而不是必需的，这些类可以异步加载，而且不需要实例化。动态加载用于加载Ext JS的类文件时，对于使用组件不多的应用程序来说相当不错，但是对于一个大的应用程序，建议还是使用完整的框架包。主要原因是拆分的类文件虽然减少了页面的下载流量，但是会增加服务器请求数量，增加服务器的负担，因而未必能加快页面加载速度，这个要权衡好。不过，在单页面应用中，使用动态加载模型文件、用户自定义组件等是不错的选择。
mixins这是Ext JS 4中一个很实用的新特性。使用mixins配置属性，可为类添加特殊的功能。它有点类似插件，不过它在类初始化的时候会混合在类的原型中。与如图1-5所示的Window类一样，可以轻松地将拖放或缩放混合到类中。6.自动的配置功能在定义新类的时候，在config属性中定义的任何属性，类系统都会自动为其添加set、get、reset和apply方法，从而能够在调用代码中配置这些属性。7.新增的数据模型在Ext JS 4中新增了数据模型特性，它与3版的Record类类似，但是功能更强大。在模型内就可以实现验证、关联和数据处理等功能。8.全新的绘图与图表功能在Ext JS 3中使用的是基于Flash的图表，在使用上会受到一定的限制。在Ext JS 4中，使用Canvas、SVG和VML等基本图形功能，实现了全新的绘图和图表功能。这是让企业应用开发人员最兴奋的一个功能。因为终于可以在客户端轻松实现强大的图表功能，不再需要关心那些烦人的Flash了。9.重新架构的Grid组件Grid组件在Ext JS 4中进行了重新架构。在新的架构下，EditorGrid消失了，在Grid下就可轻松实现编辑功能。下面是重新架构后的Grid拥有的新特性：智能渲染：在Ext JS 3中进行Gird渲染时，无论你是否需要这个特性，渲染都会生成这个特性的标记，从而降低渲染速度和性能。在第4版，渲染就聪明得多了，它按需渲染，只生成所需的标记，因而大大提高了渲染速度和性能。标准的布局：因为采用了智能渲染，Grid的许多部件都可以做成标准的组件并集成到标准的布局管理系统中，再不依赖自定义的内部的标记和CSS。这方面突出的例子是HeaderContainer类，在Ext JS 4，列标题是真正的容器，这样就可以使用HBox布局，让你使用Flex值定义列的宽度。特性支持：在Ext JS 4中，有一个名称为Ext.grid.Feature的类，通过它可以非常灵活地为Grid创建新功能，而不是像Ext JS 3那样，通过插件实现新的功能。目前已经实现的特性功能包括RowWrap、RowBody、分组（Grouping）以及分块（Chunking）或缓冲（Buffering）。虚拟滚动：该功能主要为Grid提供虚拟的、按需加载的数据视图，从而实现无分页浏览。编辑改进：在Ext JS 4中，EditorGrid消失了，代替它的是Editing插件，从而可在任何Grid中实现编辑功能。而且，RowEditor扩展已经成为了Ext JS 4的一个组件。数据视图（DataView）：GridView现在扩展自DataView，从而使Grid可以轻松定制，而且也使Grid可以和DataView使用相同的选择模型，如实现键盘导航选择行等。10.新的主题特性在Ext JS 3中，要改变Ext JS的主题是相当不容易的事情，需要做大量的工作。在Ext JS 4中，采用了Compass和SASS，从而使更换主题成为一件非常轻松的工作。SASS是标准CSS的一个超集，支持以下高级功能：内部选择器。变量。Mixins。选择器继承。编译和压缩。为特殊应用程序中不需要的组件完全删除CSS。
相关资源：七夕情人节表白HTML源码(两款)