原文：Introducing Ext JS 4.2
Ext JS 4.2包含了許多令人興奮的增強功能和特性。你可能已經在之前的文章中閱讀過相關的一些功能和特性了，如Grid組件改進。在這篇文章中，將介紹新的海王星主題和從右到左（RTL）的支持。

海王星

在Ext JS 4.2中，我們很高興的歡迎海王星作為官方完全支持的主題來到了這個大家庭。終于可以構建具有現代感的應用程序了，具有現代特性的外觀對于應用程序開發和 使用海王星主題一直都是非常重要的，Ext JS現在支持4個核心主題了：海王星、經典、灰色和無障礙。海王星通過最大限度的減少不必要的視覺元素，如邊框和在許多地方添加的補丁（padding），讓應用程序看起來更干凈、現代和輕松，從而使整體界面感覺更輕松和開放。海王星的目要遠遠超過只是提供一個新的和漂亮的外觀。我們的愿望是讓你可以更輕松的創造更好的應用程序體驗，且更好的支持盡可能多的瀏覽器。為了支持這項工作，我們已經在如何更易于通過定制和分享主題的方式來實現主體化方面取得了一些顯著的進步。

靈活性

創造更好的應用程序的關鍵是易于定制。要進行更改，必須盡可能的簡單，因為它涉及到主題：一個不可能放諸四海而皆準的東西

為了使Ext JS的主題盡可能的靈活，我們已經極大的擴展了Sass變量的使用。由于變量是鏈接在一起的，所以變量會通過其他變量來計算他們的默認值，只要有可能，改變會如你所預期的那樣傳遞（如設置“$base-color”）。

主題包

Sencha Cmd 3.1增加了對“packages”的支持：代碼、樣式和資源的獨立包。海王星和其他的Ext JS 4.2主題現在交付的主題包開啟了許多令人興奮的可能性。通 常情況下，包允許你輕松的在應用程序之間，以及與其他開發人員之間分享代碼。Ext JS的loader就是是用來分析Javascript類的，而且之前版本的Sencha Cmd也處理得非常好，不過現在，使用包，Sencha Cmd可以連接全世界的Javascript類和Sass。在內部，Ext JS利用Sencha Cmd的能力來關聯Javascript和Sass以便生成它的主題，也就是說，Cmd會處理“all.scss”并最終使用Ext JS來裝載“all.css”。生成過程會確保在獨立的SCSS文件中定義的Sass變量和規則能一直根據Javascript類的層次結構保持正確的順 序。這就可以讓我們在不同的主題之間如我們共享Javascript的類那樣輕易的去共享Sass邏輯。當然，這些Sencha Cmd功能不僅限于生成Ext JS。如果使用Cmd來生成包含了所有關聯和壓縮的Javascript的
“all- classes.js”文件，那么，就可以擴展這個來生成應用程序的Sass。如果這樣做，就會先獲得另一個令人興奮的東西：CSS文件將只包含組件實際 使用到的所需的CSS。這也適用于定義的視圖，因此，應用程序可以組織它的Sass作為它的腳本的鏡像——隨著時間的推移，將會給應用程序的增長代理巨大 的幫助。與通過不下載哪些沒有使用到的Javascript來改善用戶體驗相同的方式，移除沒有使用到的CSS也會帶來很大的幫助。這讓 CSS是更真確了，因為不必要的規則不會輕易的被瀏覽器忽略。有些瀏覽器會對CSS文件中的規則數量有限制。展望未來，這會越來越重要，因為會添加新組件 和跨越所有組件的新功能（如RTL）。

自定義主題

主題是帶有重要的附加功能的特殊類型的包：主題可以擴展其他主題。這種能力可讓Ext JS 4.2去創建它的主題層次：


主題包的生成過程有一個額外的步驟，可讓主題繼承它的基礎資源，或選擇它自己的版本來替換他們。另外，針對IE的兼容性問題，圖像切片（slicer）會自動被調用，以便將CSS3邊框半徑和線性漸變樣式轉換為背景圖片。所有這一切都可以讓你去通過只增加哪些想改變的東西（樣式規則、Javascript代碼或如圖片這樣的靜態資源）來創建新的主題。這些都不需要從基本主題“復制和粘貼”任何東西。這可確保只維護核心主題就能讓你的主題能繼承bug修復或其他增強功能。你可以在這里的主題指南中學到更多與這個過程有關的東西，以及在包指南中學到更多有關包的東西（ http://docs.sencha.com/ext-js/4-2/#!/guide/command_packages和http://docs.sencha.com/ext-js/4-2/#!/guide/command_package_authoring）。

RTL

支持右對齊語言（希伯來語和阿拉伯語）一直是長期要求的功能，因此，我們很高興的說，RTL現在來了。同樣高興的說，如果不需要RTL支持，可以不啟用它，這只需要添加少量的額外代碼到框架的核心。第一步是啟用RTL以便請求“Ext.rtl”命名空間，在命名空間中包含了許多重載，如以下代碼：Ext.define(‘Ext.rtl.button.Button’, {
????????override: Ext.button.Button’,
????????…

這一系列的重載會覆蓋框架中不同的類的關鍵的定位方法，并添加必要的RTL檢查和邏輯。第二步，只要支持代碼已經注入到框架，就可在需要的容器內設置rtl配置項，如viewport：
Ext.define(‘MyApp.views.Viewport’, {
????????extend: Ext.container.Viewport’,
????????requires: [
????????????????‘Ext.rtl.*’
????????],
????????rtl: true,
????????…

Sass中的RTL

在CSS這邊，RTL支持可通過設置以下Sass變量來開啟：$include-rtl: true;
這將增加針對RTL的CSS規則使用“.x-rtl”選擇器。

混合LTR和RTL

配置項rtl會以組件的層次結構往下繼承。在viewport設置它，就有效的設置了全局RTL。該設置也可在低層次啟用或在后面通過設置“rtl: false”來改變，這樣，低層的將從這里開始往下繼承。由于IE6的CSS限制以及IE不支持Quirks、嵌套（nesting）。在這些瀏覽器，只能在RTL是全局所需的時候才去加載RTL支持所需的CSS。

本地化

為 了針對應用程序簡化這一過程，Sencha Cmd支持包類型的本地化。Ext JS 4.2現在對這種形式提供本地化支持，因此應用程序可以簡單的請求適當的本地化包。所需的Javascript會自動被包含，而且包含的rtl的Sass 變量會做相應的設置。使用這種方法，就可以為每一個本地化設置處理一個優化的Javascript/CSS生成。

性能

如果沒有Ext JS 4.2與4.1和4.0的性能對比的相關話題，可以說，這篇文章就是不完整的雖然大多數的性能改進工作一直與Grid有關，但其他的一些變化，也是出于性能方面的原因。

這些變化的范圍包括移除CSS重置（它的眾多的“昂貴”的規則來重置、作用域重置和不重置），將處理“framed”組件的邏輯移出Javascript（如按鈕），簡化按鈕標記以及它的組件布局邏輯。在上一篇文章，使用主題示例比較過了Ext JS 4.0.7和4.1。從那時起，在社區里一個很好的朋友提交了一個無疑是比主題更好的，模仿他自己的實際應用的測試的示例程序。我已經在同樣的IE8/Windows 7筆記本上來測試該示例，以下是結果：

通過在Ext JS 4.2按類別細分的性能，現在看起來像下圖那樣。劃掉的數字是之前版本的，以顯示從4.0.7到4.1.1到當前4.2.0的進展。性能問題永遠不會結束，我們將繼續尋找方法來×××能。如果想有關我所做的Grid和新的bufferedrenderer插件的工作信息，可以閱讀這篇文章。

毫不起眼的

在以下有很多小改進。如果想了解這方面詳細信息，可以參考升級指南。

Grid/Tree

有幾個新的示例來演示現在如何將許多以前不能一起工作的功能結合起來。也許最有趣的是鎖定的TreeGrid。

插件bufferedrenderer也適用于樹，因此，現在可以處理比以前更大的樹（或TreeGrid）。要查看鎖定、緩沖渲染的TreeGrid，可以去查看這個示例。查看所有示例。

標簽

標簽現在可以垂直使用了。可以在新的側標簽示例中看到他們旋轉并停靠在左邊或右邊。

字形

很多人想使用Web字體來為應用程序添加擴展性和跨瀏覽器的圖片。為了支持這個，已經加入了glyph配置項，它非常類似icon和iconCls。可以通過設置glyph配置項來將代碼點和必要的文字渲染成組件：{
????????xtype: 'button',
????????glyph: 42
}

這個支持按鈕、標簽、面板標題和菜單項。可以在新的Kitchen Sink示例中查看效果。

MVC

事件域（Event Domains）的引入使控制器可以響應通過如Stores或其他控制器這樣的東西來響應事件觸發。

以下是類似代碼：

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>

“{$}”擴展為屬性名，而“{.}”是屬性值。

小結

創建引人注目的、現代的應用程序，是艱苦的工作。要讓他們看來很棒，跑起來很快，更是難上加難。隨著海王星、RTL、新的Grid的改進、增加的Cmd和所有在Ext JS 4.2的各種新功能，將為您的用戶提供一個奇妙的經歷變得從未如此簡單。
作者：Don Griffin
Don Griffin is a member of the Ext JS core team. He was an Ext JS user for 2 years before joining Sencha and has over 20 years of software engineering experience on a broad range of platforms. His experience includes designing web application front-ends and back-ends, native GUI applications, network protocols and device drivers. Don’s passion is to build world class products that people love to use.

轉載于:https://blog.51cto.com/dqhuang/1180347

總結

以上是生活随笔為你收集整理的【翻译】Ext JS 4.2介绍的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。