ExtJS 6.6的新功能

ExtJS · 發表 2018-10-10 14:44:49

摘要：簡介 Sencha Ext JS 6.6已經支援NPM包和開放工具。Ext JS 6.6現在可以通過NPM包讓開發人員使用已經相當熟悉的異常簡單的工作流。現在，Ext JS開發人員可以是強大的開放式工具來快速生成、構建和更新Ext JS應用程式。Ext JS 6.6還帶來了一些主...

簡介

Sencha Ext JS 6.6已經支援NPM包和開放工具。Ext JS 6.6現在可以通過NPM包讓開發人員使用已經相當熟悉的異常簡單的工作流。現在，Ext JS開發人員可以是強大的開放式工具來快速生成、構建和更新Ext JS應用程式。Ext JS 6.6還帶來了一些主要的增強，如新的現代工具包元件、新的美麗的可訪問主題、現代工具包本地化、高階路由和幾個Ext JS元件和框架的增強。

Ext JS 6.6 的亮點

Ext JS 6.6通過NPM和開放工具從根本上改變了Ext JS應用程式的生成和建立。此版本中的新功能包括:

Ext JS的NPM包：Ext JS標準和白金使用者現在可以直接從Sencha的NPM儲存庫獲取元件、主題和框架的NPM包。

ExtGen：新的開放工具，可以讓你通過回答問題的方式來生成新的Ext JS應用程式，並提供了幾個新的應用程式模版。

ExtBuild：新的開放工具，用來生成和分發應用程式

新的現代工具包元件：基於材料設計規範的時間欄位以及時間面板元件以提供時間檢視。

新的美麗的石墨主題可以讓可訪問性應用程式令人大吃一驚。

增強了對現代工具包的本地化支援。

高階Ext JS路由功能的增強。

增強了儀表元件，並提高了顯示間隔值的能力。

基於Ext JS框架、元件和主題的NMP包

JavaScript社群中的工具正進化到以更快的時間、更高的質量和可維護性來建立Web應用程式。Node Package Manager或NPM是JavaScript開發人員非常喜歡的軟體包管理器。NMP承載了一個龐大的儲存庫，包含了70萬個基於JavaScript的程式碼包以便開發人員在他們的應用程式中使用這些程式碼包。

現在，隨著Ext JS 6.6的釋出，Ext JS框架、元件和主題已經作為NPM包託管在NPM儲存庫npm.sencha.com。Ext JS開發人員可以執行簡單的命令來將一個包新增到專案、管理依賴和管理所使用的包的版本。他們也可以很容易的將第三方的JavaScript庫新增到Ext JS應用程式。

譬如，可以使用以下命令輕鬆的將Ext JS Pivot Grid的NMP包新增到專案：

npm i --save @sencha/ext-pivot

類似，可以使用以下命令將新的石墨主題新增到ExtJS NPM專案：

npm i --save @sencha/ext-classic-theme-graphite

Ext JS客戶只需要簡單的使用他們的支援門戶帳號登入就可以訪問NPM儲存包。要注意的是，帳號裡的@字元需要替換為“..”，例如，登入帳號為[email protected]，則需求修改為firstname.lastname..sencha.com。

可以使用以下命令在Sencha NPM儲存庫進行認證：

npm login --registry=http://npm.sencha.com --scope=@sencha

Ext-Gen：新的用來建立ExtJS應用程式的開發工具

隨著新的Ext JS NPM包的釋出，我們正在建立新的強大的開發工具包來實現程式碼生成、構建繼承和工作區管理。Ext-Gen是新的使用Ext JS NPM包來協助快速建立應用程式的強大工具。Ext-Gen提供了多個新模版來建立移動、桌面或通用的應用程式。當然，也可以使用自己的模版來建立Ext JS應用程式。

Ext-Gen是一個基於NodeJS的跨平臺命令工具，提供了多種模式來建立應用程式。它的自動模式會使用預設配置項快速構建應用程式，而交換模式則通過提出一系列的問題並根據這些問題的答覆來構建應用程式。建立的應用程式將使用webpack的開發伺服器來將任何修改立即反映到瀏覽器中。

可以使用以下命令來安裝Ext-Gen:

npm install -g @sencha/ext-gen

可以通過以下命令來使用Ext-Gen建立整個Ext JS應用程式：

ext-gen app -a

Ext-Build：新的生成Ext JS應用程式的開發工具

Ext-Build是一個新的基於NodeJS的用來生成Ext JS應用程式的工具。Ext-Build當前使用的是Sencha Cmd和Google Closure compoler來生成和分發Ext JS應用程式。Ext-Gen會使用Ext-Build來生成Ext JS應用程式的開發或產品版本。

例如，可以使用以下命令和生成配置來生成現代工具包應用程式：

ext-gen app -t moderndesktop -n ModernApp

"builds": {
"desktop": {
"toolkit": "modern",
"theme": "theme-material",
}
}

對於開發工具，仍然可以使用向後相容的Cmd命令。NPX是npm包的執行器，允許在應用程式的工作區內呼叫Cmd的二進位制檔案。

例如：使用以下命令將直接使用Cmd來生成應用程式：

npx sencha app build desktop

新的現代工具包元件：時間欄位和時間面板

時間面板是一個新的現代工具包元件，通過使用模擬鐘面的方式提供了一種非常簡便的時間選擇方式。時間面板元件支援桌面、平板以及iOS或安卓裝置。在選擇小時值後，元件將自動前進到分鐘。有多個配置項來設定鐘面的對齊方式和模式。當將垂直配置設定為auto時，時間頭將基於裝置的方向進行設定。

時間欄位是一個新的現代工具包元件，它允許輸入時間並自帶時間驗證。時間欄位會使用JavaScript日期物件來驗證輸入。元件支援多種時間格式且依賴於預設的區域設定。時間欄位可以使用日期選擇器來提供簡單的時間選擇方式。

ExtJS現代工具包應用程式的本地化

用能理解的語言和所習慣的約定來與使用者教練是至關重要的。Ext JS現代工具包現在也支援本地化了，這有助於開發人員方便的針對非英語語言對應用程式實現本地化。Ext JS 6.6添加了德國、義大利、法國、西班牙和葡萄牙等語言。本地化包在override資料夾包含了所有的本地化繫結檔案。本地化重寫會告訴Ext JS去替換某些元件的預設值（英語），如日期格式、月或日等。

以下是一個使用法語的應用程式的app.json檔案的示例：

"requires": [
…, 

"ext-locale"
],

"locale":"fr",

對於NPM建立的英語程式，可以使用以下程式碼匯入ext-modern-locale包：

npm i --save @sencha/ext-modern-locale

石墨（Graphite）主題：新的美麗的可訪問主題

Ext JS 6.6提供了新的美麗的石墨主題，會讓你的可訪問應用程式令人眼前一亮。石墨追她一個可訪問的高對比度主題，旨在使視力受損的使用者更容易的檢視應用程式。石墨主題是從海衛一主題繼承的，因此它是一個扁平的、簡約的、非圖形化的主題。石墨主題可以讓英語程式開箱即用或擴展出自定義的外觀。石墨主題的顏色、字型和填充在設計時就遵循WCAG2.0可訪問性指南的指引。

使用材料主題（Material Theme）的動態樣式

對於許多Web應用程式，可以快速的檢視主題改變後的效果是相當實用的。Ext JS的材料主題支援CSS變數，並提供了API來獲取或設定顏色，因而，現在可以通過一個顏色選擇來驗證材料顏色，還可以在不需要外部伺服器或Cmd的情況下，實時更新應用程式的外觀。

使用材料主題的API來獲取顏色：

Ext.theme.Material.getColors()

使用材料主題的API來設定顏色：

Ext.theme.Material.setColors({
'darkMode': darkMode,
'base': base || me._materialBaseColor,
'accent': accent || me._materialAccentColor
});

高階ExtJS路由功能的增強

ExtJS的路由功能可以通過瀏覽器的歷史堆疊來跟蹤應用程式的狀態。路由還支援應用程式的深度連結，允許直接訪問應用程式的某一個部件。這是非常實用的功能，使用者可以將應用程式作為一個書籤，甚至將連結傳送給其他人以便直接訪問應用程式的某個部件。

在ExtJS 6.6包含了幾個高階路由功能，如在導航離開時，執行路由的exit，在路由中支援具有可選型別的命名引數，以及在第一次使用後斷開連結的路由。下面是一個使用萬用字元路由的示例：

routes : {
'*': 'onRoute',
'foo' : 'onFoo'
}

routes : {
'*': {
before : 'onBeforeRoute',

exit : 'onExit',
action : 'onRoute'
},
'foo' : 'onFoo'
}

儀表元件的指標增強

儀表元件在現代或經典應用程式都得到了增強，現在支援使用各種不同的指標型別。在應用程式中，現在可以使用楔形、菱形、尖峰、箭頭等指標型別。

儀表元件還提供了自定義指標功能。

原文：ofollow,noindex">http://docs.sencha.com/extjs/6.6.0/guides/whats_new/whats_new.html

譯者：上將軍

譯文：https://blog.csdn.net/tianxiaode/article/details/80761192

ExtJS 6.6的新功能

您可能也會喜歡…