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()
}
});</pre>
XTemplate
你現在能更容易地在你的模板里遍歷對象：
<tpl foreach=".">
<tr>
<td>{$}</td>
<td>{.}</td>
</tr>
</tpl> “{$}"擴展為屬性名而"{.}"就是屬性的值。
總結
建立新引人的現代應用程序是份困難工作。要讓他們看起來了不起，要跑得快，還要用起來舒服更難了。使用Neptune，RTL，新的網格的改善，Cmd的增強和Ext JS 4.2里各種所有的新特性，傳遞驚人的體驗給你的用戶從未如此簡單！
由Don Griffin編寫
Don Griffin是Ext JS核心團隊里的一員。他在加入Sencha前是一個2年經驗的Ext JS用戶同時還有在廣泛的平臺上20年的軟件工程經驗。他的經驗包括了設計web應用前端和后端，本地GUI程序，網絡協議和設備驅動。構建用戶喜歡的世界級的產品是Don的追求。