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裡各種所有的新特性，傳遞驚人的體驗給你的使用者從未如此簡單！

　　由Don Griffin編寫

　　Don Griffin是Ext JS核心團隊裡的一員。他在加入Sencha前是一個2年經驗的Ext JS使用者同時還有在廣泛的平臺上20年的軟體工程經驗。他的經驗包括了設計web應用前端和後端，本地GUI程式，網路協議和裝置驅動。構建使用者喜歡的世界級的產品是Don的追求。