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

海王星

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

靈活性

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

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

主題包

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

自定義主題

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


主題包的生成過程有一個額外的步驟，可讓主題繼承它的基礎(chǔ)資源，或選擇它自己的版本來替換他們。另外，針對IE的兼容性問題，圖像切片（slicer）會自動被調(diào)用，以便將CSS3邊框半徑和線性漸變樣式轉(zhuǎn)換為背景圖片。所有這一切都可以讓你去通過只增加哪些想改變的東西（樣式規(guī)則、Javascript代碼或如圖片這樣的靜態(tài)資源）來創(chuàng)建新的主題。這些都不需要從基本主題“復(fù)制和粘貼”任何東西。這可確保只維護核心主題就能讓你的主題能繼承bug修復(fù)或其他增強功能。你可以在這里的主題指南中學(xué)到更多與這個過程有關(guān)的東西，以及在包指南中學(xué)到更多有關(guān)包的東西（ 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現(xiàn)在來了。同樣高興的說，如果不需要RTL支持，可以不啟用它，這只需要添加少量的額外代碼到框架的核心。第一步是啟用RTL以便請求“Ext.rtl”命名空間，在命名空間中包含了許多重載，如以下代碼：Ext.define(‘Ext.rtl.button.Button’, {
????????override: Ext.button.Button’,
????????…

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

Sass中的RTL

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

混合LTR和RTL

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

本地化

為 了針對應(yīng)用程序簡化這一過程，Sencha Cmd支持包類型的本地化。Ext JS 4.2現(xiàn)在對這種形式提供本地化支持，因此應(yīng)用程序可以簡單的請求適當(dāng)?shù)谋镜鼗?。所需的Javascript會自動被包含，而且包含的rtl的Sass 變量會做相應(yīng)的設(shè)置。使用這種方法，就可以為每一個本地化設(shè)置處理一個優(yōu)化的Javascript/CSS生成。

性能

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

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

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

毫不起眼的

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

Grid/Tree

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

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

標(biāo)簽

標(biāo)簽現(xiàn)在可以垂直使用了?？梢栽谛碌膫?cè)標(biāo)簽示例中看到他們旋轉(zhuǎn)并?？吭谧筮吇蛴疫?。

字形

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

這個支持按鈕、標(biāo)簽、面板標(biāo)題和菜單項?？梢栽谛碌腒itchen Sink示例中查看效果。

MVC

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

以下是類似代碼：

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>

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

小結(jié)

創(chuàng)建引人注目的、現(xiàn)代的應(yīng)用程序，是艱苦的工作。要讓他們看來很棒，跑起來很快，更是難上加難。隨著海王星、RTL、新的Grid的改進、增加的Cmd和所有在Ext JS 4.2的各種新功能，將為您的用戶提供一個奇妙的經(jīng)歷變得從未如此簡單。
作者：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.

轉(zhuǎn)載于:https://blog.51cto.com/dqhuang/1180347

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。