Ext JS 4倒數計時：開發者預覽版

weixin_34377065發表於2011-02-17
JS

作為Ext JS團隊的代表，我很高興地宣佈第一個Ext JS 4開發者預覽版 釋出了。Ext JS 4是到目前為止，我們所做的改動最大，有史以來最先進的Javascript框架。從生成HTML程式碼到類系統，框架的每一個領域幾乎都被更新了。我們統一了Api，新增了令人難以置信的新功能和改進了整個框架的效能。

對Ext JS 4，我們有三個主要目標： 速度、 健壯性和易用性。我們想要速度更快，並儘可能在每個瀏覽器上足夠健壯，而且很容易學習和使用的框架。為了實現這一目標，我們整個框架回到畫板，以及回到我們曾將建立的的速度最快、 最防彈的版本。最重要的是，我們已經成功做到這一點，並堅持了走使用“the Ext JS way”的核心經驗來寫應用程式。

今天的預覽版（包含例程）包含了最終版幾乎所有的元件。我們已經將一些閃光點重新打磨，尤其是樹和Accordion。我們也將Ext JS 3預設的藍色主題移植到了新的系統，這項工作通過全新的SASS主題系統輕鬆的完成了。有如此多的更新，實在不可能在一篇部落格文章中說明，因此我們將繼續在未來數週內書寫我們的Ext JS 4倒數計時系列。

Ext JS 4開發者預覽版今天已經可以下載了。現在就下載 。

你已經知道的框架

Ext JS一直致力於開發用於建立Web應用程式的領先Javascript框架，至今已經是第4版了，我們的信念至今未變。對任何重大的升級來說，連續性是最重要的一個方面，如API的連續性、外觀和感覺以及向後與以前版本的相容性。在Ext JS 4，我們已經採取了兩個重要的步驟來實現這一目標，

首先，Ext JS 4是完全沙箱的，沒有擴充套件的原生物件和對全域性變數的依賴。未來證明這一點，我們已經採用兩個最好版本的Ext JS，並將它們組合在一個單一頁面裡。我們使用了Ext JS 3中的桌面例子，在桌面中，你可以看到Ext JS 4生成的圖表，就像它們是桌面的一部分。你可以親自去這裡 檢視一下。

 

第二步就是提供強大的舊式層以幫助你升級Ext JS 3.x的應用程式。我們從今天開始，將會出一個詳細描述版本之間的差異的指南，並作為我們的部署持續進行更新。除了指南，我們還會提供一個檔案讓你拖進你的Ext JS3.x應用程式來幫助你升級應用程式。我們將盡快通過另一篇文章來講述這兩個問題。

相當棒的新特性

圖表

上星期我們介紹了Ext JS 4的圖形和圖表包。我們知道這是對Ext JS 4最值得期待的部分之一，但是沒想到會其受歡迎程度是那麼的令人難以置信。對沒有看過原文的人，我們再說一次，Ext JS 4不需要任何外掛，通過SVG、Canvas和VML就可以繪製出華麗的圖表，而且該圖表可以通過整合的新的資料包在任何瀏覽器上實現動畫。

資料

資料包在版本4中得到了巨大的升級，它可以應用程式中載入和儲存所有資料。和新的模型類一起，可以很容易的處理客戶端上任何資料種類的資料。驗證在模型級實現，新的關聯API可以讓你在模型之間建立關係。

擴充套件的代理類現在可以直接使用在模型上，這意味著你不需要使用Store載入和儲存資料，而且localStorage代理可以讓你通過一行程式碼在客戶端儲存資料。現在在客戶端就可以實現資料的多列排序、過濾和分組，而新的Reader事件可以處理巢狀資料。資料包是框架中使用最廣泛的元件，我們已經在近期的文章中介紹過：

Grid是Ext JS的焦點之一。它是一個令人難以置信的通用元件，根據你需要格式，提供了大量資料的一次檢視的好方法。在Ext JS 4中，我們已徹底修改，令它更快、更輕、更容易定義。

我們開始大幅減少Grid的HTML標記。在以前的版本中，Grid始終渲染自定義的標記，如行擴大、 編輯、 列鎖定和其它標記。在版本4中，Grid相當聰明，它只渲染基於你的功能需要開啟的標記。在大多數情況下，Ext JS 4比Ext JS 3產生的標記減少了20%，這帶來了巨大的效能優勢。事實上，Grid是如此之快，甚至勝過了現在不推薦使用的3.x的ListView。

關於Grid會有許多話題，我們將會在發表一篇介紹它的文章。最後要注意的是，Tree現在是從Grid擴充套件出來的。這不單減少了框架的大小，而且還使它非常容易的使用自定義Grid的方式自定義Tree。我們正在做Tree的收尾工作，期望可以在下一個版本中看到它們。

表單

和Grid一樣，表單在Ext JS應用程式中也會經常使用。在版本3，我們可能已經受夠了Formlayout，因為它很難獲得正確的形式。Ext Js 4徹底的刪除了FormLayout，使你能夠在layout中任意佈置你的表單。表單也不再限於DOM中，這樣就解決了以前不能跨越多個標籤的問題。

通過新的FieldLayout，任何元件都可以放置在表單中，並給予一個標籤，甚至錯誤資訊。這是因為欄位的定義已被移動到Mixin（請看部落格文章Ext JS’s new class system ）。你可以將一個Grid、Tree或者其它元件增加到表單中作為一個多項選擇器。有一些例子演示此版本中新的表單功能。

 

 

佈局

佈局系統是Ext JS中最強大的部分之一，它處理應用陳旭中每個元件的大小和位置，並在將其保持在適當位置以讓你的使用者順利完成它們的工作。Ext JS 2的佈局速度很快，但是它不夠靈活，雖然我們認為它可以做到。在Ext JS 3中，我們使用了新的佈局盒子，雖然變得很靈活，但是我們犧牲了效能。

在Ext JS 4，我們終於實現了兩全其美，效能更好，更靈活的佈局，而且還新增了DockLayout物件。有興趣的，可以看一下Jamie在SenchaCon 2010期間發表部落格文章《Ext JS 4 Layouts 》，裡面解釋了所有與佈局的有關更新。

無障礙

寫無障礙的Javascript應用程式是很困難的。在Ext JS 4中，我們採用了以下3個措施實現了無障礙應用程式，脫離了苦海：

ARIA支援。所有元件都採用ARIA屬性標記，這樣就可以使螢幕知道如何渲染頁面。
焦點管理。在整個應用程式中啟用鍵盤驅動導航。
高對比度主題。在黑的背景上使用亮的文字，這樣使有視力障礙的使用者更容易閱讀。

無障礙和TRL支援對我們來說都很重要，它們將會作為新功能出現在即將推出的版本中。

主題

我們得到的最大請求就是在應用程式輕鬆製作主題。根據我們開發Sencha Touch的經驗，在Ext jS 4中，通過功能強大的SASS和Compass，使我們的框架更容易製作主題。每一個框架的外觀方面，都可通過簡單的調整顏色變數輕鬆自定義。

如果你還沒有見識過SASS和Compass的威力和靈活，那麼你可以看一下Dave Kaneda’s的文章《theming Sencha Touch 》。我們將很快發表標題為《 theming Ext JS 4》的文章。如果你實在急不可耐，那麼可以在SenchaCon 2010中與 Rob Dougan’s 討論此問題。

Ext JS 4路由圖

今天釋出的是Ext JS 4最終版本的幾個版本中的第一個版本。我們期望在接著下來的幾個星期每週釋出一個新的版本，而第一個beta版本將在兩週後釋出。Ext JS 4你們已經等待很久了，我期望框架的變化能讓你們興奮。請瀏覽這些例子 ，並在評論中告訴我們你們的想法。

Written by Ed Spencer.

原文：http://www.sencha.com/blog/ext-js-4-developer-preview/

相關文章