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

海王星

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

靈活性

創(chuàng)造更好的應(yīng)用程序的關(guān)鍵是易于定制。要進(jìn)行更改，必須盡可能的簡單，因?yàn)樗婕暗街黝}：一個(gè)不可能放諸四海而皆準(zhǔn)的東西

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

主題包

Sencha Cmd 3.1增加了對“packages”的支持：代碼、樣式和資源的獨(dú)立包。海王星和其他的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會(huì)處理“all.scss”并最終使用Ext JS來裝載“all.css”。生成過程會(huì)確保在獨(dú)立的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”文件，那么，就可以擴(kuò)展這個(gè)來生成應(yīng)用程序的Sass。如果這樣做，就會(huì)先獲得另一個(gè)令人興奮的東西：CSS文件將只包含組件實(shí)際 使用到的所需的CSS。這也適用于定義的視圖，因此，應(yīng)用程序可以組織它的Sass作為它的腳本的鏡像——隨著時(shí)間的推移，將會(huì)給應(yīng)用程序的增長代理巨大 的幫助。與通過不下載哪些沒有使用到的Javascript來改善用戶體驗(yàn)相同的方式，移除沒有使用到的CSS也會(huì)帶來很大的幫助。這讓 CSS是更真確了，因?yàn)椴槐匾囊?guī)則不會(huì)輕易的被瀏覽器忽略。有些瀏覽器會(huì)對CSS文件中的規(guī)則數(shù)量有限制。展望未來，這會(huì)越來越重要，因?yàn)闀?huì)添加新組件 和跨越所有組件的新功能（如RTL）。

自定義主題

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


主題包的生成過程有一個(gè)額外的步驟，可讓主題繼承它的基礎(chǔ)資源，或選擇它自己的版本來替換他們。另外，針對IE的兼容性問題，圖像切片（slicer）會(huì)自動(dòng)被調(diào)用，以便將CSS3邊框半徑和線性漸變樣式轉(zhuǎn)換為背景圖片。所有這一切都可以讓你去通過只增加哪些想改變的東西（樣式規(guī)則、Javascript代碼或如圖片這樣的靜態(tài)資源）來創(chuàng)建新的主題。這些都不需要從基本主題“復(fù)制和粘貼”任何東西。這可確保只維護(hù)核心主題就能讓你的主題能繼承bug修復(fù)或其他增強(qiáng)功能。你可以在這里的主題指南中學(xué)到更多與這個(gè)過程有關(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’,
????????…

這一系列的重載會(huì)覆蓋框架中不同的類的關(guān)鍵的定位方法，并添加必要的RTL檢查和邏輯。第二步，只要支持代碼已經(jīng)注入到框架，就可在需要的容器內(nèi)設(shè)置rtl配置項(xiàng)，如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

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

本地化

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

性能

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

這些變化的范圍包括移除CSS重置（它的眾多的“昂貴”的規(guī)則來重置、作用域重置和不重置），將處理“framed”組件的邏輯移出Javascript（如按鈕），簡化按鈕標(biāo)記以及它的組件布局邏輯。在上一篇文章，使用主題示例比較過了Ext JS 4.0.7和4.1。從那時(shí)起，在社區(qū)里一個(gè)很好的朋友提交了一個(gè)無疑是比主題更好的，模仿他自己的實(shí)際應(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的進(jìn)展。性能問題永遠(yuǎn)不會(huì)結(jié)束，我們將繼續(xù)尋找方法來×××能。如果想有關(guān)我所做的Grid和新的bufferedrenderer插件的工作信息，可以閱讀這篇文章。

毫不起眼的

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

Grid/Tree

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

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

標(biāo)簽

標(biāo)簽現(xiàn)在可以垂直使用了。可以在新的側(cè)標(biāo)簽示例中看到他們旋轉(zhuǎn)并停靠在左邊或右邊。

字形

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

這個(gè)支持按鈕、標(biāo)簽、面板標(biāo)題和菜單項(xiàng)。可以在新的Kitchen 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>

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

小結(jié)

創(chuàng)建引人注目的、現(xiàn)代的應(yīng)用程序，是艱苦的工作。要讓他們看來很棒，跑起來很快，更是難上加難。隨著海王星、RTL、新的Grid的改進(jìn)、增加的Cmd和所有在Ext JS 4.2的各種新功能，將為您的用戶提供一個(gè)奇妙的經(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)容還不錯(cuò)，歡迎將生活随笔推薦給好友。