《Ext JS權威指南》——1.3節Ext JS 4概述

1.3　ext js 4概述

1.令人興奮的ext js 4

曾經筆者以為ext js會止步于ext js 3，而全力投身于移動開放領域。而且html 5的強勢出現，在筆者看來，會對javascript架構帶來一定的沖擊，ext js前景不太樂觀。想不到在2010年年底，在sencha部落格上出現一篇名為《ext js 4 preview: refactoring & standardizing the rendering process》的文章，才知道，ext js即将釋出新版本，而且新版本不是簡單地在ext js 3基礎上增加新功能，而是完全重構，以獲得更好性能。在持續的等待中，sencha部落格不斷有介紹ext js 4的文章發表，在這些文章中逐漸明晰了ext js 4的改變，而這些改變，每一項都是那麼令人興奮。

ext js 3與ext js 4的相容問題

ext js 4因為架構重構，使用ext js 3開發的應用程式如果要平滑轉移到ext js 4平台上，工作量是巨大的，如何才能實作兩者間的相容，讓已有的ext js 3項目可以使用ext js 4呢？ext js 4團隊提供了以下兩種方法：

js相容層：為ext js 3提供一個可選的javascript檔案，其作用是在ext js 4加載後，為ext js 3代碼提供别名和重寫功能，進而讓許多ext js 3代碼能在ext js 4中正确運作。

沙盒模式：實際就是将ext js全局對象名稱修改為ext 4，這樣就不會與ext js 3産生沖突了。這樣，兩個版本的ext js就可在同一個頁面使用。詳細情況可浏覽ext js 4包中的“ext js 3 & 4 on one page ”示例。

3.新的類系統

在2011年1月19日的部落格文章《count-down to ext js 4: dynamic loading and new class system》中，出現了如圖1-5所示的新的類圖。

從圖中可以看到類系統在原有的基礎上添加了mixin和require這兩個新特性。實際新特性還有不少，請看下面的新特性清單：

使用ext.define替代ext js 3中的ext.extend來定義新類。

實作類的自動依賴管理，以便實作動态加載。

通過mixins将一些特殊功能添加到類中，如圖1-5所示的通過mixins功能為window添加了拖放和縮放功能。

可建立類似java或c#中的靜态類（statics）。

可為配置選項自動生成set和get方法。

定義類的時候，如果需要，可自動生成命名管道，而不是像ext js 3一樣，需要先定義命名管道，之後才可以定義類。

動态加載。

4.動态加載

動态加載的作用就是根據應用程式需要加載相應的腳本檔案，而不是一次性加載所有腳本或加載一個保護全部功能的架構檔案。其主要目的就是提高頁面加載速度。

ext js 4有一個完整的類依賴圖，在加載某個類的時候，會依據依賴圖遞歸下載下傳所需的類檔案，進而使應用程式正确運作。

實作此功能的要點就是在定義類的時候，設定類的requires或uses屬性。兩個屬性的差別在于uses屬性隻是使用到該類，而不是必需的，這些類可以異步加載，而且不需要執行個體化。

動态加載用于加載ext js的類檔案時，對于使用元件不多的應用程式來說相當不錯，但是對于一個大的應用程式，建議還是使用完整的架構包。主要原因是拆分的類檔案雖然減少了頁面的下載下傳流量，但是會增加伺服器請求數量，增加伺服器的負擔，因而未必能加快頁面加載速度，這個要權衡好。不過，在單頁面應用中，使用動态加載模型檔案、使用者自定義元件等是不錯的選擇。

mixins

這是ext js 4中一個很實用的新特性。使用mixins配置屬性，可為類添加特殊的功能。它有點類似插件，不過它在類初始化的時候會混合在類的原型中。與如圖1-5所示的window類一樣，可以輕松地将拖放或縮放混合到類中。

6.自動的配置功能

在定義新類的時候，在config屬性中定義的任何屬性，類系統都會自動為其添加set、get、reset和apply方法，進而能夠在調用代碼中配置這些屬性。

7.新增的資料模型

在ext js 4中新增了資料模型特性，它與3版的record類類似，但是功能更強大。在模型内就可以實作驗證、關聯和資料處理等功能。

8.全新的繪圖與圖表功能

在ext js 3中使用的是基于flash的圖表，在使用上會受到一定的限制。在ext js 4中，使用canvas、svg和vml等基本圖形功能，實作了全新的繪圖和圖表功能。

這是讓企業應用開發人員最興奮的一個功能。因為終于可以在用戶端輕松實作強大的圖表功能，不再需要關心那些煩人的flash了。

9.重新架構的grid元件

grid元件在ext js 4中進行了重新架構。在新的架構下，editorgrid消失了，在grid下就可輕松實作編輯功能。下面是重新架構後的grid擁有的新特性：

智能渲染：在ext js 3中進行gird渲染時，無論你是否需要這個特性，渲染都會生成這個特性的标記，進而降低渲染速度和性能。在第4版，渲染就聰明得多了，它按需渲染，隻生成所需的标記，因而大大提高了渲染速度和性能。

标準的布局：因為采用了智能渲染，grid的許多部件都可以做成标準的元件并內建到标準的布局管理系統中，再不依賴自定義的内部的标記和css。這方面突出的例子是headercontainer類，在ext js 4，列标題是真正的容器，這樣就可以使用hbox布局，讓你使用flex值定義列的寬度。

特性支援：在ext js 4中，有一個名稱為ext.grid.feature的類，通過它可以非常靈活地為grid建立新功能，而不是像ext js 3那樣，通過插件實作新的功能。目前已經實作的特性功能包括rowwrap、rowbody、分組（grouping）以及分塊（chunking）或緩沖（buffering）。

虛拟滾動：該功能主要為grid提供虛拟的、按需加載的資料視圖，進而實作無分頁浏覽。

編輯改進：在ext js 4中，editorgrid消失了，代替它的是editing插件，進而可在任何grid中實作編輯功能。而且，roweditor擴充已經成為了ext js 4的一個元件。

資料視圖（dataview）：gridview現在擴充自dataview，進而使grid可以輕松定制，而且也使grid可以和dataview使用相同的選擇模型，如實作鍵盤導航選擇行等。

10.新的主題特性

在ext js 3中，要改變ext js的主題是相當不容易的事情，需要做大量的工作。在ext js 4中，采用了compass和sass，進而使更換主題成為一件非常輕松的工作。sass是标準css的一個超集，支援以下進階功能：

内部選擇器。

變量。

mixins。

選擇器繼承。

編譯和壓縮。

為特殊應用程式中不需要的元件完全删除css。