ExtJS 4.2 介绍

Ext JS4.2 纳入了很多令人激动的提升和特点。你可能已经在其他文章中了解到一部分，如：Grid控件的改进。本文经讨论新主题海王星（Neptune Theme）和对从右到左（RTL）的支持。

Neptune

欢迎“Neptune”主题来到Ext JS 4.2官方完全支持的主题的家族。使用Neptune 主题来构建一个时髦、具有现代感的应用程序对程序员越来越重要。现在Ext JS 只是4个核心主题为：Neptune, Classic, Gray and Accessibility.

Neptune 通过最大限度地减少不必要的视觉元素， 如border边框和padding， 让你的应用程序在整体界面感觉上更轻松和开放。

Neptune 不只是提供了新颖、可爱的界面。我们希望帮助您轻松创造最佳的应用体验和多浏览器支持。为此，我们努力让我们开发的主题更容易定制和分享。

自适应

创建好应用的关键是易于定制。因为没有普适的程序，所以程序要做的易于更改。

为了让Ext JS 主题更加灵活，我们大量使用了Sass变量（译注：Sass），它们是相互关联的，所以它们根据周边变量来合理的计算自己的值，来尽可能的使变化（例如设置 “$base-color”）和你预期的一致。

主题包

Sencha Cmd 3.1加入了对"包(packages)“的支持，”包(pakcages)“是指一个包含了代码，式样和资源的组合。Neptune和其他的Ext JS 4.2主题现在都是以主题包的形式发布的，而这样的发布形式让项目有了许多令人的可能性。

总的来说，包(packages)允许你很容易的在你的应用程序之间，甚至是和其他开发者之间，共享你的代码。而Sencha Cmd之前的版本中就已经通过Ext Js loader来很好的处理javascript类之间的共享。二现在，通过包(packages)，Sencha Cmd可以在javascript class和sass的范围里都实现共享。

在内部实现得过程中，Ext JS通过Sencha Cmd把Javascript和Sass结合起来，来构建它的那些主题。Ext Js中的"all.scss"和最终生成的"all.css"就是通过Cmd来生成的。这个自动构建过程保证了那些定义了Sass变量和规则的SCSS文件都按照基于javascript的类型层级的顺序组织好。这让我们能够像对待Javascript Classes一样很轻松的在不同的主题之间共享我们的Sass逻辑。

当然，这些Sencha Cmd特性并不是使用ExtJs框架所必须的。但是如果你使用了这些特性来把你应用里面的那些结构紧凑且相互关联的类的js文件压缩成为一个“all-classes.js”文件，那么你可以在下次使用的时候直接引用这个文件来建立你的Ext应用而不必逐个引用那诸多的js文件（译者注：貌似现在很多js框架都可以这样做了吧，汗！）。通过这样的使用步骤，你会发现另一个令人兴奋的东东：你的css文件将只包含你的应用实际使用的组件的css文件;对于你自己定义的视图也是如此。这样，你的应用就可以丢弃那些没有用到的大量多余的js文件了，这点非常有用，尤其当你的应用规模不断随时间增大。

同时，我们通过不让用户下载那些没有用到的js文件（通常这类的文件非常之多）来提高用户体验，去掉那些没有用到的css文件也有很大帮助（译者注：以前的版本没用的js和css文件多到坑爹无止境的地步啊），因为那些没有用到的css文件里面通常含有很多不被浏览器所支持的规则，甚至一些浏览器对你使用的css文件都有各种限制。进一步讲，随着新组件、新特性的不断增加（比如RTL)（译者注：这些组件，特性通常彼此引用、甚至相互束缚，这种束缚往往体现在css,js文件之中，这种情况下，引用最少量的文件是减少麻烦的最好办法），你会发现这种做法非常有必要。

自定义主题

主题包通常是这样具有一个非常重要的、附加功能的特殊的包，它们可以继承自其他的主题包。新版本Ext Js 4.2中利用主题包的这一特性来创建它的主题层次结构（如图）：

主题包的创建过程包含一个额外的步骤，它使得一个主题可以继承获得任意它的父类的资源或者替换其父类主题（译者注：主题包的继承和多态）。同样的，为了能够更好地兼容IE浏览器，图像的“切片”被自动引用来转换您利用css3标准定义的背景图片的圆角边的半径和直线的倾斜度。

所有的这些都是为了能够让您通过只增加希望改变的主题样式（比如主题的规则，js代码或者像图片一样的静态资源）来构建新的主题，而不必从基主题包中去“复制粘贴”任何东西。这确保您的主题能够继承我们在核心主题包中所采用的bug修复和一些其他的增强措施。

您可以通过以下主题帮助链接去学到更多关于这一过程的知识http://docs.sencha.com/extjs/4.2.0/#%21/guide/theming，同时还可以通过以下链接学习一些更为详细的关于包的知识 http://docs.sencha.com/ext-js/4-2/#!/guide/command_packages ， http://docs.sencha.com/ext-js/4-2/#!/guide/command_package_authoring.

从右到左的顺序显示RTL

人们已经期待ExtJS支持从右到左语言（像希伯来语和阿拉伯语一样）已久了。所以现在我们很高兴的告诉大家现在ExtJS已经支持RTL了，我们要同样高兴地告诉您，如果您不需要RTL支持并且不启用它，那么它只对核心框架添加了很少的额外代码。

启用RTL的第一步就是导入“Ext.rtl.*”命名空间，这个命名空间包含很多如下重写：

Ext.define(‘Ext.rtl.button.Button’, {      override: Ext.button.Button’,      …

这些重写代替了框架中各种类的关键定位方法，并且增加了必要的RTL校验和RTL逻辑。

一旦你拥有了这些注入框架的支持代码，接下来在你想支持RTL的容器做如下配置：

Ext.define(‘MyApp.views.Viewport’, {      extend: Ext.container.Viewport’,      requires: [          ‘Ext.rtl.*’      ],      rtl: true,      … 

RTL in Sass

在CSS文件中，RTL支持可通过设置以下Sass变量来开启：

$include-rtl: true; 

这将在使用“.x-rtl”选择器时增加针对RTL的CSS规则

混合LTR 和RTL

配置项rtl会以组件的层次结构往下继承。有效的全局RTL设置可以在viewport里面进行，该设置也可在低层启用或通过设置“rtl: false”来取消，这样，就可以往更下层继承。（译者注：这个属性配置可以向下继承）

由于IE6的CSS限制以及IE不支持Quirks、嵌套（nesting），在这些浏览器，只能在RTL是全局所需的时候才去加载RTL支持所需的CSS。

语言环境

为了简化您的应用构建，Sencha Cmd提供了一个类型叫作“locale”的包。Ext JS 4.2现在提供这样一种语言支持形式，使得您的应用只需要引用您使用到的的语言包。那些您实际使用到的js脚本会被自动引用而且包含rtl的Sass变量会相应地进行设置。通过这种方式，你可以为每个不同的语言包来创建最简化的js或者css构建（译者注：以前版本的local包下含有大量的你根本就不会用到的支持各种语言的js文件）。

性能

如果我不对ExtJS4.2的性能和以前的4.1和4.0两个版本作一比较，那么这篇介绍新特性的文章就会显得很不完整。（以前的版本中grid组件消耗性能比较明显），所以主要的性能改进工作会围绕grid组件展开。在围绕grid组件提升性能的同时，我们也对于其他部分作了改进。

这些变化包括移除CSS重置（因为规则的重置、作用域的重置和取消重置会消耗大量的性能），将处理“framed”组件的逻辑移出Javascript（如按钮），简化按钮标记以及它的组件布局逻辑等等。

在前面的文章中，我用了主题的例子将Ext Js 4.0.7 和Ext Js 4.1两个版本进行了比较。之后，社区里有一位很好的朋友提交了他自己的一个样例工程，那里面用到了他自己对性能比较的方法。相对于我使用主题来比较新旧版本的性能的作法来说，这无疑是一个更好的，更现实化地测试。我将前面用过的例子在装有IE8浏览器的windows7的笔记本上作了测试，结果如下：

现在，Ext JS4.2按类别性能细分，看起来如下图所示。之前的版本数字“被划掉”以显示从4.0.7到4.1.1再到当前的4.2.0的进展。

工作并没有做完，我们将继续寻找方法来提高性能。如果你想阅读更多关于我们在Grid上做了所有的工作和新的缓冲渲染插件，查看这里所发表的博客原文。

一些小的细节

这里有很多小的改进。如果对此感兴趣想要得到更多细节的话，请参阅更新指南。

Grid/Tree

这里有一些例子可以让你了解到我们是如何让那些本无关联的特性结合到一起去工作的。也许这当中最有意思的一个例子就是locking TreeGrid.了吧。

buffered-renderer插件现在也可以用来对付tree了，所以你现在可以对付比以前规模更大的tree了（或者规模更大的tree grid)。想要见识下locking buffered rendered TreeGrid的话，请看下这个例子。

查看所有的例子。

标签页 Tabs

Tabs 现在可以垂直显示,你可以在这个new Side Tabs example例子中看到停靠在左边和右边的标签页.

标签页现在可以垂直显示,

Glyphs 配置选项

很多人想在他们的应用中网页字体使用添加可伸缩的、跨浏览器的图片. 为了支持这个特性,我们添加了"glyph"的配置选项,这个非常类似"icon"和"iconCls". 你仅仅在你的代码里配置"glyph"选项,然后一些必需的文本会渲染到你的组件中.

{      xtype: 'button',      glyph: 42  }

这个特性支持按钮,标签页,面板头部和菜单,你可以查看这个例子 new Kitchen Sink example.

MVC

引入的事件域允许你的Controller响应由像Store或其他Controller发出的事件。

代码看起来是这样的：

this.listen({      controller: {          '*': {  // any controller              foo: 'onFoo' // method names are now supported!          }      },      store: {          '#storeId': {              remove: ‘onStoreRemove’          }      },      component: { // same as this.control()      }     });

XTemplate

你现在能更容易地在你的模板里遍历对象：

<tpl foreach=".">      <tr>          <td>{$}</td>          <td>{.}</td>      </tr>  </tpl>

“{$}"扩展为属性名而"{.}"就是属性的值。

总结

建立新引人的现代应用程序是份困难工作。要让他们看起来了不起，要跑得快，还要用起来舒服更难了。使用Neptune，RTL，新的网格的改善，Cmd的增强和Ext JS 4.2里各种所有的新特性，传递惊人的体验给你的用户从未如此简单！