作为Ext JS团队的代表,我很高兴地宣布第一个Ext JS 4开发者预览版 发布了。Ext JS 4是到目前为止,我们所做的改动最大,有史以来最先进的Javascript框架。从生成HTML代码到类系统,框架的每一个领域几乎都被更新了。我们统一了Api,添加了令人难以置信的新功能和改进了整个框架的性能。
对Ext JS 4,我们有三个主要目标: 速度、 健壮性和易用性。我们想要速度更快,并尽可能在每个浏览器上足够健壮,而且很容易学习和使用的框架。为了实现这一目标,我们整个框架回到画板,以及回到我们曾将创建的的速度最快、 最防弹的版本。最重要的是,我们已经成功做到这一点,并坚持了走使用“the Ext JS way”的核心经验来写应用程序。
今天的预览版(包含例程)包含了最终版几乎所有的组件。我们已经将一些闪光点重新打磨,尤其是树和Accordion。我们也将Ext JS 3默认的蓝色主题移植到了新的系统,这项工作通过全新的SASS主题系统轻松的完成了。有如此多的更新,实在不可能在一篇博客文章中说明,因此我们将继续在未来数周内书写我们的Ext JS 4倒计时系列。
Ext JS 4开发者预览版今天已经可以下载了。现在就下载 。
你已经知道的框架
Ext JS一直致力于开发用于创建Web应用程序的领先Javascript框架,至今已经是第4版了,我们的信念至今未变。对任何重大的升级来说,连续性是最重要的一个方面,如API的连续性、外观和感觉以及向后与以前版本的兼容性。在Ext JS 4,我们已经采取了两个重要的步骤来实现这一目标,
首先,Ext JS 4是完全沙箱的,没有扩展的原生对象和对全局变量的依赖。未来证明这一点,我们已经采用两个最好版本的Ext JS,并将它们组合在一个单一页面里。我们使用了Ext JS 3中的桌面例子,在桌面中,你可以看到Ext JS 4生成的图表,就像它们是桌面的一部分。你可以亲自去这里 查看一下。
第二步就是提供强大的旧式层以帮助你升级Ext JS 3.x的应用程序。我们从今天开始,将会出一个详细描述版本之间的差异的指南,并作为我们的部署持续进行更新。除了指南,我们还会提供一个文件让你拖进你的Ext JS3.x应用程序来帮助你升级应用程序。我们将尽快通过另一篇文章来讲述这两个问题。
相当棒的新特性
图表
上星期我们介绍了Ext JS 4的图形和图表包。我们知道这是对Ext JS 4最值得期待的部分之一,但是没想到会其受欢迎程度是那么的令人难以置信。对没有看过原文的人,我们再说一次,Ext JS 4不需要任何插件,通过SVG、Canvas和VML就可以绘制出华丽的图表,而且该图表可以通过集成的新的数据包在任何浏览器上实现动画。
数据
数据包在版本4中得到了巨大的升级,它可以应用程序中加载和保存所有数据。和新的模型类一起,可以很容易的处理客户端上任何数据种类的数据。验证在模型级实现,新的关联API可以让你在模型之间建立关系。
扩展的代理类现在可以直接使用在模型上,这意味着你不需要使用Store加载和保存数据,而且localStorage代理可以让你通过一行代码在客户端保存数据。现在在客户端就可以实现数据的多列排序、过滤和分组,而新的Reader事件可以处理嵌套数据。数据包是框架中使用最广泛的组件,我们已经在近期的文章中介绍过:
Grid是Ext JS的焦点之一。它是一个令人难以置信的通用组件,根据你需要格式,提供了大量数据的一次查看的好方法。在Ext JS 4中,我们已彻底修改,令它更快、更轻、更容易定义。
我们开始大幅减少Grid的HTML标记。在以前的版本中,Grid始终渲染自定义的标记,如行扩大、 编辑、 列锁定和其它标记。在版本4中,Grid相当聪明,它只渲染基于你的功能需要开启的标记。在大多数情况下,Ext JS 4比Ext JS 3产生的标记减少了20%,这带来了巨大的性能优势。事实上,Grid是如此之快,甚至胜过了现在不推荐使用的3.x的ListView。
关于Grid会有许多话题,我们将会在发表一篇介绍它的文章。最后要注意的是,Tree现在是从Grid扩展出来的。这不单减少了框架的大小,而且还使它非常容易的使用自定义Grid的方式自定义Tree。我们正在做Tree的收尾工作,期望可以在下一个版本中看到它们。
表单
和Grid一样,表单在Ext JS应用程序中也会经常使用。在版本3,我们可能已经受够了Formlayout,因为它很难获得正确的形式。Ext Js 4彻底的删除了FormLayout,使你能够在layout中任意布置你的表单。表单也不再限于DOM中,这样就解决了以前不能跨越多个标签的问题。
通过新的FieldLayout,任何组件都可以放置在表单中,并给予一个标签,甚至错误信息。这是因为字段的定义已被移动到Mixin(请看博客文章Ext JS’s new class system )。你可以将一个Grid、Tree或者其它组件增加到表单中作为一个多项选择器。有一些例子演示此版本中新的表单功能。
布局
布局系统是Ext JS中最强大的部分之一,它处理应用陈旭中每个组件的大小和位置,并在将其保持在适当位置以让你的用户顺利完成它们的工作。Ext JS 2的布局速度很快,但是它不够灵活,虽然我们认为它可以做到。在Ext JS 3中,我们使用了新的布局盒子,虽然变得很灵活,但是我们牺牲了性能。
在Ext JS 4,我们终于实现了两全其美,性能更好,更灵活的布局,而且还新增了DockLayout对象。有兴趣的,可以看一下Jamie在SenchaCon 2010期间发表博客文章《Ext JS 4 Layouts 》,里面解释了所有与布局的有关更新。
无障碍
写无障碍的Javascript应用程序是很困难的。在Ext JS 4中,我们采用了以下3个措施实现了无障碍应用程序,脱离了苦海:
ARIA支持。所有组件都采用ARIA属性标记,这样就可以使屏幕知道如何渲染页面。
焦点管理。在整个应用程序中启用键盘驱动导航。
高对比度主题。在黑的背景上使用亮的文字,这样使有视力障碍的用户更容易阅读。
无障碍和TRL支持对我们来说都很重要,它们将会作为新功能出现在即将推出的版本中。
主题
我们得到的最大请求就是在应用程序轻松制作主题。根据我们开发Sencha Touch的经验,在Ext jS 4中,通过功能强大的SASS和Compass,使我们的框架更容易制作主题。每一个框架的外观方面,都可通过简单的调整颜色变量轻松自定义。
如果你还没有见识过SASS和Compass的威力和灵活,那么你可以看一下Dave Kaneda’s的文章《theming Sencha Touch 》。我们将很快发表标题为《 theming Ext JS 4》的文章。如果你实在急不可耐,那么可以在SenchaCon 2010中与 Rob Dougan’s 讨论此问题。
Ext JS 4路由图
今天发布的是Ext JS 4最终版本的几个版本中的第一个版本。我们期望在接着下来的几个星期每周发布一个新的版本,而第一个beta版本将在两周后发布。Ext JS 4你们已经等待很久了,我期望框架的变化能让你们兴奋。请浏览这些例子 ,并在评论中告诉我们你们的想法。
Written by Ed Spencer.